La Animacion de Imagnes con CSS3 pueden ser afinadas bastante bien y ser rotas en pedazos usando "frames" o Marcos, gracias a las reglas de @keyframes .Actualmente se usa en los navegadores de FF5+, Safari, Chome,y posiblemente en IE10,las siguientes imagenes usan los marcos claves de CSS3para crear el efecto de jalar o halar una imagen para ser revelada cuando se mueve el cursor del mouse sobre la imagen. En el IE, se ejecuta este efecto bastante bien tambien el los exploradores IE8 y IE9.
Para Ver un ejemplo Da Click en boton azul aqui abajo:
Como Implementar el efecto de halar una nueva foto encima de la que esta pues siguie estos simples pasos:
1.Entra a la interface de blogger
2.Ve a plantilla>>Editar Html
3.Busca el siguiente codigo ]]></b:skin>
4. Copia y pega el codigo de abajo despues/debajo de ]]></b:skin>
<style>
.pulloutimage{
position: relative;
}
.pulloutimage img{
position: absolute; /* absolute position and stack images inside container */
left: 0;
}
.pulloutimage img.ondemand{ /*CSS for image shown on demand */
opacity: 0;
visibility: hidden; /* hide it initially (mainly for legacy browsers) */
}
.pulloutimage img.original{
z-index: 1; /* set base z-index of initially shown image */
}
@-webkit-keyframes revealfromright{ /* keyframe animation that slides a DIV out from another before overlapping later */
0%{ /* Start of animation */
z-index: -1;
opacity: 0;
}
50%{ /* Half way point, move image to right edge of container */
opacity: 1;
z-index: -1;
left: 100%;
box-shadow: none;
}
51%{ /* 51% point, stack animating image on top of original image */
z-index: 2;
}
100%{ /* Final point, move animating image back so it's on top of original */
left: 0;
box-shadow: 8px 8px 15px gray;
}
}
@-moz-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
@-ms-keyframes revealfromright{
0%{
z-index:-1;
opacity:0;
}
50%{
opacity:1;
z-index:-1;
left:100%;
box-shadow: none;
}
51%{
z-index:2;
}
100%{
left:0;
box-shadow: 8px 8px 15px gray;
}
}
.pulloutimage:hover img.ondemand{ /* when mouse rolls over pulloutimage container, style to apply to "ondemand" image */
-webkit-animation-name:revealfromright; /* specify animation keyframe */
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-moz-animation-name:revealfromright;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-ms-animation-name:revealfromright;
-ms-animation-duration: 1s;
-ms-animation-iteration-count: 1;
animation-name:revealfromright;
animation-duration: 1s;
animation-iteration-count: 1;
visibility:visible;
opacity:1;
box-shadow: 8px 8px 15px gray;
z-index:2;
}
.pulloutimage:hover img.original{ /* when mouse rolls over pulloutimage container, style to apply to "original" image */
opacity:0.5;
}
</style>
5.Pega el siguiente codigo en el Editor de Html en la parte que desees poner una imagen con este agradable efecto de CSS3 .
<!--dimensions of each container should be set to original image's dimensions -->
<div class="pulloutimage" style="width:298px; height:223px">
<img class="original" src="http://www.mnkstudio.com/blog/wp-content/uploads/2009/04/autos-concepto-2009-10.jpg
" />
<img class="ondemand" src="http://memberfiles.freewebs.com/91/97/56689791/photos/Modern-cars/3287634645_09d7dcaf31.jpg
" />
</div>
<br />
<div class="pulloutimage" style="width:263px; height:199px">
<img class="original" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQ_yD0JurpXXu9ChfqDmEqOwLnr-VoVZ7qqLJ5CCoLRlpOBdI9c
" />
<img class="ondemand" src="http://amoremagazine.typepad.com/.a/6a00e54fefa26688330168e9dbeedf970c-800wi
" />
</div>
Nota:Para cambiar las imagenes que estan aqui por las tuyas solo reemplaza la Url de la imagen en este caso src="http://www.mnkstudio.com/blog/wp-content/uploads/2009/04/autos-concepto-2009-10.jpg" />
Cada set lleva dos imagnes distintas .
Listo! Ahora cuando tus vistantes de tu sitio o blog disfrutaran de este super truco de imagenes asistido por la implementacion de estilo CSS3.
0 comentarios:
Publicar un comentario