21 de jan de 2013

Swing effect


daqui a pouco trago joguinho valendo vaga no recomendo por uma semana,no próximo post eu explico melhor.

Muito cute. 

Olá gente eu estou sumida eu sei como eu disse é porque eu estou tentando fazer o layout só que a preguiça não me deixar em paz , e a falta de vontade para fazer então pioro . 

então gente para compensar o meu sumiço eu vou fazer maratona de tutoriais para vocês o que acham ?

então hoje eu trouxe um efeito que eu aprendi no tumblr do gold html ele se chama: Swing effect quem quiser ver a preview dele clique aqui. e procure por swing effect .

Se gosto clique em leia mais 

Para você usar você tem que fazer a mesma que coisa que eu ensinar . 

cole o que está abaixo antes de: ]]></b:skin>

@-webkit-keyframes swing {
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);}
25% {transform: rotate(5deg) translate(5px); -webkit-transform: rotate(5deg) translate(5px); -moz-transform: rotate(5deg) translate(5px); -o-transform: rotate(5deg) translate(5px); -ms-transform: rotate(5deg) translate(5px);}
50% {transform: rotate(-5deg) translate(-5px); -webkit-transform: rotate(-5deg) translate(-5px); -moz-transform: rotate(-5deg) translate(-5px); -o-transform: rotate(-5deg) translate(-5px); -ms-transform: rotate(-5deg) translate(-5px);}
75% {transform: rotate(5deg) translate(5px); -webkit-transform: rotate(5deg) translate(5px); -moz-transform: rotate(5deg) translate(5px); -o-transform: rotate(5deg) translate(5px); -ms-transform: rotate(5deg) translate(5px);}
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);}
}
.swing {-webkit-transition: .9s; border-radius: 5px;}

agora cole o que está abaixo em um gadget de javascript/html.

<img src="sua imagem" class="swing">
se usar credite ao gold html porque o efeito é dê lá . 

Nenhum comentário:

Postar um comentário

Antes de comentar saiba que:
- Comentários contendo apenas divulgação serão deletados;
- Comentários contendo apenas;Oi,ou,segue meu blog também serão deletados;
-Deixe o link do seu blog para que eu visiti mais tarde;
-Comentários com ofensas ou palavrões serão deletados: