Efeito Back


Boa tarde, gente.

Estou muito feliz que meu blog consegui alcançar os 500 seguidores, só de falar digitar eu fico ansiosa. Tipo essa cobrinha dançando, é legal a sensação, sério. Vamos ir para Londres comemorar? Eu pago por vocês -sqn.

O efeito de hoje eu aprendi no We Heart HTML, então créditos a lá. No mesmo, ocorre a transição de "uma imagem para outra", quer dizer, parece, mas é tudo em uma só imagem. Para ver a preview do efeito, clique aqui e passe o mouse em qualquer uma das imagens.


Cole o código abaixo acima de ]]></b:skin>:
/*** efeito back por htmlstrew ***/ @-WEBKIT-KEYFRAMES PULSE {0% { -WEBKIT-TRANSFORM: SCALE(1); }50% { -WEBKIT-TRANSFORM: SCALE(1.1); }100% { -WEBKIT-TRANSFORM: SCALE(1); }} .moddib {background: url('urlimagem'); height: 100px; width: 133px; display: inline-block; -webkit-transition-duration: 0.5s; margin-left:10px;} .moddib:hover {background-position: right; -WEBKIT-ANIMATION: PULSE 1S;-MOZ-ANIMATION: PULSE 1S;-MS-ANIMATION: PULSE 1S; -webkit-transition-duration: 0.5s; }
No código,você só deve substituir o URL da imagem. Veja um exemplo com as medidas abaixo:

Agora,para adicionar mais autores,coloque repita o código e troque o '.moddib' por '.moddib2', e assim vai, entenderam? Mas só repita a partir da tag que eu coloquei no exemplo,mesmo...
Para o efeito aparecer, cole o código apresentado no blockquote em um gadget:
<a href="link"><div class="moddib"></div> 

8 comentários

  1. Nossa, esse efeito é muito lindo...

    Depois-dos-sonhos.blogspot.com

    ResponderExcluir
  2. Eu estava louca querendo esse efeito e não lembrava, agora já sei onde olhar! Beijão
    london-things

    ResponderExcluir
  3. Tomei um Susto com a cobrinha quando balancei rápido aushaushaushaush'''

    ótimo tutorial.

    ResponderExcluir
  4. eu nunca consigo fazer esse efeito. Pena ;-;
    Mas mesmo assim, muito obrigada pelo tuto :D
    http://oppadoramas.blogspot.com.br/

    ResponderExcluir

- Se quiser um post, peça na ask !

- Se não gostou, não use palavras ofensivas. Ninguém precisa rebaixar-se a tanto para expressar a opinião.

- Leio todos os comentários, respondo e retribuo sempre que o tempo deixa.