Tutorial - Efeito 'Pá'

Oin gente <33

Então, sinto em lhes informarem, mas o Natsu nos traiu do mesmo jeito que a lua traiu a Joelma IUSHAIUSA' Mentira, mas também não tenho notícia de vida dele o3o Então vou tentar atualizar o blog mesmo assim com os meus lindos (só que não) materiais e tutoriais >3< Eu adoro tutoriais e utilitários, isso me traz inspiração para posts comuns u-u Quanto mais eu posto isso, mais eu tenho ideias quase brilhantes para os meus posts no LD, isso quando eu estou em um dia bom q

Bem, voltando ao assunto do post, eu fiz um efeito fedorento chamado 'Pá'. Ele não parece uma pá que recolhe alguma coisa, mas sim porque eu fico falando PÁ quando ele abre. Nem ficou tão bom, é a primeira vez que eu uso Keyframes, e pretendo descobrir mais efeitos, mas creio que ficou usável o3o A Natália e a Bia Riccio disseram que ficou bonito <33 Preview aqui: ☁☀☁

Coloque o código abaixo, acima de ]]></b:skin>

@keyframes arroz { 0% {border: 2px solid #dec2e3;
}  10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-webkit-keyframes arroz {0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-moz-keyframes arroz { 0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }@-o-keyframes arroz { 0% {border: 2px solid #dec2e3;} 10% {border: 2px solid #ab7f9f;} 20% {-webkit-transform: rotate(360deg);} 100% { border-radius: 50px;} }.image {-webkit-transition-duration: .90s;border-radius: 4px;border: 2px solid #dec2e3;}.image:hover {-webkit-transition-duration: .80s;-animation: arroz 2s alternate; -webkit-animation: arroz 2s alternate; -o-animation: arroz 2s alternate; -moz-animation: arroz 2s alternate;}

Entendendo o código: Onde tem 'border: 2px solid #ab7f9f' e 'border: 2px solid #dec2e3;' é a cor da borda. Mude se não quiser ela lilás o3o Não mude nada no resto q

Para adicionar no blog o efeito coloque no Html/JavaScript

<center>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
<a href='LINKDOBLOG'><img src="LINKDAIMAGEM" class='image' /></a>
</center>

Espero que tenham gostado o3o

Nota do Natsu: Gente, eu não morri. No dia 20 (dia que esse post foi publicado, rs) eu estava numa feirinha de artesanatos, gastronomia, dança e vários produtos. Por isso não postei, e além de chegar exausto a noite ainda tive que ir a um restaurante :v. Férias que eram para o blog, estão sendo para mim. ç-ç