Yo babys! Como estão? Nossa quantos comentários vocês fizeram estou louca para moderar porem ainda estou em viajem bubu... Falta apenas duas duas provas para mim voltar pra casa wheeeee!!! Mas hoje venho postar um efeito bem legal, simples mas legal. Por alguma razão gosto de coisas simples sem muita coisa chamativa acho tão fofo. O efeito se chama Sunday hihi achei engraçadinho, mas vou parar de amolar vocês e vamos ao tutorial ne?
Códigos
@-webkit-keyframes nen {
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
@-moz-keyframes nen {
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
@-o-keyframes nen {
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
.nen { -webkit-transition: .2s; -webkit-border-radius: 1px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 1px; -moz-border-radius-bottomright: 10px; border-radius: 1px; border-bottom-right-radius: 10px;
box-shadow: 0px 1px #d15e93;}
.nen:hover { -webkit-animation: nen .2s alternate infinite linear; -webkit-border-radius: 1px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius: 1px; -moz-border-radius-bottomright: 5px; border-radius: 1px; border-bottom-right-radius: 5px; }
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
@-moz-keyframes nen {
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
@-o-keyframes nen {
0% {-webkit-transform: rotate(1deg);}
25% {-webkit-transform: rotate(10deg);}
50% {-webkit-transform: rotate(1deg);}
100% {-webkit-transform: rotate(10deg);}
}
.nen { -webkit-transition: .2s; -webkit-border-radius: 1px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius: 1px; -moz-border-radius-bottomright: 10px; border-radius: 1px; border-bottom-right-radius: 10px;
box-shadow: 0px 1px #d15e93;}
.nen:hover { -webkit-animation: nen .2s alternate infinite linear; -webkit-border-radius: 1px;-webkit-border-bottom-right-radius: 5px;-moz-border-radius: 1px; -moz-border-radius-bottomright: 5px; border-radius: 1px; border-bottom-right-radius: 5px; }
Códigos
<center><a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a>
<a href="LINK" title="Vaga"><img class="nen" src="http://i.imm.io/1aq9R.png" /></a></center>
Prontinho!!!! Espero que tenham gostado os créditos são do blog WOT ate aproxima pessoal beijokas.
lindo esse efeito *-*
ResponderExcluirSenhor Drama (Perfil)
Verdade ^^
ExcluirLindo o efeito
ResponderExcluirObrigada *-*
ExcluirNunca Aparece O Código!
ResponderExcluir]]> é um dos códigos principais de um template.
ExcluirTem certeza que não apareceu?