Imagen Efecto Bungee

CLIC AQUÍ: VISTA PREVIA

Esta es una actualización de un viejo tutorial que me encantan. Así que vayamos al PASO a PASO

Código CSS

1. Desde Tema de Blogger da clic en el botón  Personalizar 
2. Clic en Opciones avanzadas y buscamos Agregar CSS.
3. Copia y pega el siguiente código. Clic en  Aplicar al blog 

/*Efecto Bungee ----------------------------------------------- */ @-webkit-keyframes shaik { 10% {-webkit-transform: translatey(-5px);} 100% {-webkit-transform: translatey(-10px);} 100% {-webkit-transform: scale(1.1);} 0% {-webkit-transform: rotate(-5deg); } 25% {-webkit-transform: rotate(40deg); } 100% {-webkit-transform: rotate(-40deg); } } @-moz-keyframes shaik { 10% {-webkit-transform: translatey(-5px);} 100% {-webkit-transform: translatey(-10px);} 100% {-webkit-transform: scale(1.1);} 0% {-webkit-transform: rotate(-5deg); } 25% {-webkit-transform: rotate(40deg); } 100% {-webkit-transform: rotate(-40deg); } } @-o-keyframes shaik { 10% {-webkit-transform: translatey(-5px);} 100% {-webkit-transform: translatey(-10px);} 100% {-webkit-transform: scale(1.1);} 0% {-webkit-transform: rotate(-5deg); } 25% {-webkit-transform: rotate(40deg); } 100% {-webkit-transform: rotate(-40deg); } } .bungeebox img { width: 100px; border-top: #37dabe solid 5px; border-bottom: #ff52ff solid 5px; border-right: #ff52ff solid 5px; border-left: #37dabe solid 5px; -webkit-transition: .7s; box-shadow: 1px 1px #d6d6d6; border-radius: 20%; } .bungeebox img:hover { -webkit-animation: shaik .7s alternate infinite linear; border-radius: 50%; }

Código HTML

Pega este último código en un gadget de HTML/JavaScript desde Diseño o en una publicación del tu blog.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjex-BEjT113M7rPtSN8URdnO7HG-Sm2Y9WY56Y4IXhvN8DKeVQxUF30jdIuTaMMrRq8ZyDMfDfRB9tAQfGV6mnbFT1rVPMKlgfR_40HLiwe6PfG3PGfmgYy9t6u8GyzB-5Jsq7_vfyDJ8/s320/download20200503211317.png' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnCOuhydLOFOfg8_ir0DL9YjIsDZ53IFMlwCo7W_0tx8aPVBE3b-wtySzf_RWfv6mi5WPcGPkrYpP69ACdRRAkPvmMn7TnU7C33wfgssBo0O5yBZrnP5LM-NTS970eLK8kIpSOcvoUM9A/s320/download20200503211524.png' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEi5XL1KWO_wGpjJ0eT_3RxaOQdRuAUDa1BWyqF_V87pufmdeMfdYN8Hg0VrrtQDw1xOxqiwwL0_dah1HXpu36u7oZ-8LhSxWrz34FkUN28Mev66N48QYoyC5JOPSakFJAAVqcSjjSRNM/s320/download20200503211702.png' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgva2J3dvfwgn5HzGc9-d6XW1T4dq_5r24_X_UFKSH_r9pkXpLmd2X1ukya_YrNfxTGZWcawKK_mR-Ifrl5e1QTLOKx4AVORRfUT1grVgQWDNq_zwyvTPGFHH0no7k_MVNA9Is78mb1zz0/s320/download20200503211956.png' /> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQcTMRO_uoQVkUReTOJQ1ysLqgK0hxuUXIN-czaWKwhNZm5E6iAeNiXsC9UcLxEHQ3CWm12RgNACmQvkZXUZKS4YgoplCYuXVFg4v39s3q-tQHojYPfK74XMxV5WcdphbFXYHJrp7r4Yc/s320/download20200503212314.png' /> </div>

Si quieres aumentar una opción más solo pega el sgte. código antes de </div>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjex-BEjT113M7rPtSN8URdnO7HG-Sm2Y9WY56Y4IXhvN8DKeVQxUF30jdIuTaMMrRq8ZyDMfDfRB9tAQfGV6mnbFT1rVPMKlgfR_40HLiwe6PfG3PGfmgYy9t6u8GyzB-5Jsq7_vfyDJ8/s320/download20200503211317.png' />