24/03/2013

Tutorial - Efeito Spinning



Olá meus morangos cobertos de chocolate <33

Pois é, hoje foi um dia muito agitado para mim, mas tenho certeza de que foi mais agitado ainda para outras pessoas. Eu não sei o que essa blogosfera tá virando, só sei que ela nunca foi assim, mesmo chegando muito tarde para ver o lado bom dela. O que não entendo é como as pessoas perdem tempo plagiando o blog dos outros, para que isso?. Sério, não entendo. Por que não fazer as suas próprias coisas?, o povo não tem mais criatividade?

Bem, hoje fiquei feliz por fazer meus próprios efeitos. Este foi o primeiro que eu criei. Ele é bonitinho. Nomeei de "Spinning" que quer dizer giratório ou algo do tipo. Se reblogarem ou usarem creditem!! ou arranco as suas cabeças com ma machado. Visualizem aqui
1. Cole este código acima de ]]></b:skin>

@-webkit-keyframes spinning {
.spinning {
transform: rotate(0deg) scale(0.772) skew(0deg) translate(-65px);
-webkit-transform: rotate(0deg) scale(0.772) skew(0deg) translate(-65px);
-moz-transform: rotate(0deg) scale(0.772) skew(0deg) translate(-65px);
-o-transform: rotate(0deg) scale(0.772) skew(0deg) translate(-65px);
-ms-transform: rotate(0deg) scale(0.772) skew(0deg) translate(-65px);
}
.spinning:hover{
transform: rotate(0deg) scale(0.794) skew(-13deg) translate(-65px);
-webkit-transform: rotate(0deg) scale(0.794) skew(-13deg) translate(-65px);
-moz-transform: rotate(0deg) scale(0.794) skew(-13deg) translate(-65px);
-o-transform: rotate(0deg) scale(0.794) skew(-13deg) translate(-65px);
-ms-transform: rotate(0deg) scale(0.794) skew(-13deg) translate(-65px);
}
Não modifique nada no código.

2.  Crie um gadget de HTML/JavaScript e cole isso:

<img src="URL da sua imagem aqui" class="spinning" />

Simples e prático.
Qualquer duvida é só perguntar!

12 comentários:

  1. Legalzinho o efeito, está bem explicado ^~^

    Beijos, desculpe o sumiço!
    crazyforhtml.blogspot.com

    ResponderExcluir
  2. Muito legal o efeito, más eu não gosto muito que a imagem mexa rsrsrsr
    Seguindo, segue de volta?
    the-paradiise.blogspot.com.br/

    ResponderExcluir
  3. Voce criou? nossa que perfeito esse efeito.. eu ri demais.. dessa parte. Se reblogarem ou usarem creditem!! (ou arranco as suas cabeças com ma machado.) kkkkkkkkkkkkk'

    pinkmushrooom.blogspot.com

    ResponderExcluir
    Respostas
    1. Awwwwwwh, fico muito feliz que tenha gostado, é o primeiro que faço!. ISUAISUAISASIASUAIU'

      Excluir
  4. Que lindo o efeito , adorei ! Também crio meus próprios só
    que ainda não postei nenhum no RT , HUSAUHSAHU.
    Brevemente postarei!

    Abraços!
    POST NOVO , CONFIRA >> http://pensamento-jhenny.tk/

    ResponderExcluir
  5. Oii faz um tuto desse " menu " com imagem + efeito shake ? To precisando colocar um menu em uma faixa sabe ? mas nao sei como fazer.. se puder me ajudar ♥
    novajuventudexxi.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Olha, eu postaria, mas já tem três postagens seguidas de tutoriais aqui no blog. Procure no Adolescente nerd, eu peguei lá :3

      Excluir
  6. Olá! Eu fiquei sem comentar aqui porque estava sem internet! Muito fofo o efeito!

    ResponderExcluir



Por favor, não peça nada pelos comentários, para isso temos a nossa Ask.

Os comentários daqueles que não se indentificarem seram publicados, mas não serão respondidos.

A moderação de comentários está ativa, tome cuidado com o que fala!

Pedidos de afiliação só ná página de afiliados

Não respondo mais comentários do tipo "seguindo segue de volta?"

Nao tenha preguiça de comentar, comentar nã vai fazer seus dedos caírem.