Oi amore, como estão? Milagre eu postando de dia AHSUASAHSUA. Ontem eu pretendia fazer muitos tutoriais de madrugada porém estava cansada demais ai acabei indo dormi cedo, mas hoje vou ver se faço algum :3. O tutorial de hoje é bem legal, a imagem da meio que uma caidinha pros lados, é muito fofo. Querem algum tutorial especifico? Podem pedir que se eu souber eu faço :3 não to muito inspirada pra escrever hoje.Eu ainda não respondi os comentários e nem os liberei porque fui dormi ontem, mas hoje vou fazer isso.
Esse código é em Kayframes. Pra usar é bem fácil, se você quiser usar esse efeito em mais de uma coisa, por exemplo: nos parceiros e nos postadores aconselho que coloque o código antes de ]]></b:skin> mas caso for usar em só um gadget abra o HTML/JavaScript e coloque <style> cole o código </style> e depois o código para aparecer as imagens.
@-webkit-keyframes cool { 0% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);}
12% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
25% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}
50% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
75% {transform: rotate(18deg) translate(18px); -webkit-transform: rotate(18deg) translate(18px); -moz-transform: rotate(18deg) translate(18px); -o-transform: rotate(18deg) translate(18px); -ms-transform: rotate(18deg) translate(18px);}
87% {transform: rotate(10deg) translate(10px); -webkit-transform: rotate(10deg) translate(10px); -moz-transform: rotate(10deg) translate(10px); -o-transform: rotate(10deg) translate(10px); -ms-transform: rotate(10deg) translate(10px);}
100% {transform: rotate(0deg) translate(0px); -webkit-transform: rotate(0deg) translate(0px); -moz-transform: rotate(0deg) translate(0px); -o-transform: rotate(0deg) translate(0px); -ms-transform: rotate(0deg) translate(0px);} }
.cool {-webkit-transition: .9s; border-radius: 5px;}
.cool:hover {-webkit-animation: cool .9s alternate ease;}
E para usar é assim
<img src="sua imagem" class="cool">
Esse código é lá do cssand-html que é o tumblr que eu modero :3 Quem fez esse código foi a diva da Larih.
Ilustração por forlovatoicons.
Já vi esse efeito e é perfeitoooo, divo ♥
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
Já vi esse efeito, é perfeito demais!
ResponderExcluirTo seguindo para ajudar na meta de 100 seguidores, a meta do me é 300, ajuda?
girlswithstyles.blogspot.com.br