@-webkit-keyframes vai { 0% { transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(1.3) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(1) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px); } 25% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);} 50% {transform: rotate(7deg) scale(0.964) skew(0deg) translate(-2px); -webkit-transform: rotate(7deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(7deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(7deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(7deg) scale(1) skew(0deg) translate(0px);} 75% {transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -webkit-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -moz-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -o-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px); -ms-transform: rotate(-7deg) scale(1) skew(0deg) translate(0px);} 100% { transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-webkit-transform: rotate(0deg) scale(-1) skew(0deg) translate(0px);-moz-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-o-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);-ms-transform: rotate(0deg) scale(0) skew(0deg) translate(0px);}} .vai {border-radius: 5px; border:1px double #f5f5f5; margin:1px;cursor:pointer;}
02- Passo - Adicione o código abaixo em um HTML/JAVASCRIPT.
<img src="http://media.tumblr.com/1d0090abd28f60c44eb659f0f3d26704/tumblr_inline_mj91nseBAp1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/8ad5d72ba43a801e370f4757d5b69289/tumblr_inline_mi0z8tQFwz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/e099eab1dacd8af0439b5d2c2a24dff8/tumblr_inline_misv46qXcz1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/37644c2e48097f3c98ed2151381ec971/tumblr_inline_mi0yiiRccy1qz4rgp.png" width="100" align="left" class="vai">
<img src="http://media.tumblr.com/688a535ba12868de0eea7ce3256b0c23/tumblr_inline_mhxjeaqzel1qz4rgp.png" width="100" align="left" class="vai">
Adorei esse efeito *----*
ResponderExcluirMeu Mundo, Meu Estilo
Fico feliz que gostou Jéssica..
ExcluirEsse é um ótimo tutorial, o efeito é lindo demaais, gente. :3
ResponderExcluir| Mands, do Mundo Kawaii |
é sim Mands que bom que você gostou!!
Excluir