Como Añadir efecto swing a las Imagenes en Blogger

Vamos a usar el Codigo CSS3 para imagenes que se moveran cada 5 segundos de atras hacia delante. Con esta animacion traeras la atencion de los visitantes ademas que añadiras un atractivo especial a tu blog o pagina web.Esta Animacion de swing  o sea la imagen o objeto se movera de atras hacia y delante suspendido de la parte de arriba como en un tendedero.

Ejemplo Truco de Imagenes Suspendidas:


Para aplicar este sencillo truco a tu blog de blogger sigue los siguientes simple pasos.

1.Entra a la Interface de Blogger>>Plantilla>Edite Html
2.Busque la siguiente etiqueta </head>
3.Copie el codigo de abajo y peguelo despues de </head>

<style>

.swing{
 -webkit-animation:swinging 10s ease-in-out 0s infinite;
 -moz-animation:swinging 10s ease-in-out 0s infinite;
 animation:swinging 10s ease-in-out 0s infinite;
 -webkit-transform-origin:50% 0;
 -moz-transform-origin:50% 0;
 transform-origin:50% 0;
}

@-webkit-keyframes swinging{
 0% { -webkit-transform: rotate(0); }
 5% { -webkit-transform: rotate(10deg); }
 10% { -webkit-transform: rotate(-9deg); }
 15% { -webkit-transform: rotate(8deg); }
 20% { -webkit-transform: rotate(-7deg); }
 25% { -webkit-transform: rotate(6deg); }
 30% { -webkit-transform: rotate(-5deg); }
 35% { -webkit-transform: rotate(4deg); }
 40% { -webkit-transform: rotate(-3deg); }
 45% { -webkit-transform: rotate(2deg); }
 50% { -webkit-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -webkit-transform: rotate(0); }
}

@-moz-keyframes swinging{
 0% { -moz-transform: rotate(0); }
 5% { -moz-transform: rotate(10deg); }
 10% { -moz-transform: rotate(-9deg); }
 15% { -moz-transform: rotate(8deg); }
 20% { -moz-transform: rotate(-7deg); }
 25% { -moz-transform: rotate(6deg); }
 30% { -moz-transform: rotate(-5deg); }
 35% { -moz-transform: rotate(4deg); }
 40% { -moz-transform: rotate(-3deg); }
 45% { -moz-transform: rotate(2deg); }
 50% { -moz-transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { -moz-transform: rotate(0); }
}

@keyframes swinging{
 0% { transform: rotate(0); }
 5% { transform: rotate(10deg); }
 10% { transform: rotate(-9deg); }
 15% { transform: rotate(8deg); }
 20% { transform: rotate(-7deg); }
 25% { transform: rotate(6deg); }
 30% { transform: rotate(-5deg); }
 35% { transform: rotate(4deg); }
 40% { transform: rotate(-3deg); }
 45% { transform: rotate(2deg); }
 50% { transform: rotate(0); } /* Come to rest at 50%. The rest is just stillness */
 100% { transform: rotate(0); }
}

</style>

4.Luego vaya a Diseño y seleccione Html/Javascript y anada el siguiente codigo.

<img class="swing" src="winter.jpg" /> 


<img class="swing" src="winter.jpg" style="
 animation-delay: 0.8s;
 -webkit-animation-delay: 0.8s;
 -moz-animation-delay: 0.8s;
 animation-delay: 0.8s;
 "
/> 


<img class="swing" src="winter.jpg" style="
 animation-delay: 0.5s;
 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 animation-delay: 0.5s;
 "
/> 

Nota: Recuerda que debes cambiar las imagenes en el codigo anterior
winter.jpg   por tus imagenes.


 5.Guarda el Html/Javascript y Listo .

Read More