Efecto Swing A Imagenes Con Css Para Blog

Quiero seguir en tutorial de efectos de imagenes dinamicas donde estas se mueven de un punto a otro en este articulo le añadiremos el super truco a una foto donde este se dezplaza en forma de hamaca o swing como una mecedora.

Como Añadir Slider de Imagenes

Ahora, notaras que hay una pausa entre  cada efecto; en otras palabras,cada elemento o imagen  no se mueveran todo el tiempo tiene una la pausa es de 5 segundos .Para implementar este truco solo debes seguir estos sencillos pasos.

Imagenes con Efecto Swing.



1.Entra en tu Blogger
2.Tu Blog>>Plantilla>>Editar Html y busca el siguiente codigo ]]<b:skin>
3.Pega el siguiente codigo arriba/encima de ]]<b:skin>

<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>

Luego pondras el siguiente codigo en donde desees que aparezcaen tu blog.

Alternativas:

a.Puedes incluirlo cuando escribas un nuevo articulo utilizando  Html para poner el codigo .
b.alternativa lo puedes incluir en elemento de pagina.

1.Entra en blogger>>Diseño>>Anadir Gadget>>Elementos de Pagina>>selecciona Html/javascript y copias el siguiente codigo en cuadro de contenido.

Codigo a Pegar en Html/Javascript

<img class="swing" src="https://fondosdepantallahd.es/wp-content/uploads/2012/10/cat_napper-wide-500x280.jpg" />


<img class="swing" src="https://www.fondosparapantalla.com/albums/fondos-frutas/Cerezas-001.jpg" style="
    animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -moz-animation-delay: 0.8s;
    animation-delay: 0.8s;
    "
/>


<img class="swing" src="https://www.fotoswiki.net/Uploads/fotoswiki.net/ImagenesGrandes/crucero-transatlantico.jpg" style="
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
    -moz-animation-delay: 0.5s;
    animation-delay: 0.5s;
    "
/>

Nota: Cambia lo que esta sombreado  https://fondosdepantallahd.es/wp-content/uploads/2012/10/cat_napper-wide-500x280.jp   por la direccion o Url de tus imagenes que desees mostrar.Listo.
Chequea Articulo Como Añadir Panel de Imagenes

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati