28/10/2015

Tutorial: Efeito Awake

||

Yo, yo paçoquinhas, como vão indo? Hoje não trago um tutorial mais sim um efeito, creio que muitos já devem conhece-lo mas resolvi trazer aqui para o BC também. O efeito se chama Awake, qual ao passar o mouse em uma imagem se mexe como balanço. Achei cutie <3 Achei o tutorial lá no Pequena Garota, então se utilizarem creditem lá okay? O feito fica mais legal em imagem pequenas deixando mais mimoso e harmonizo. Quer ver o efeito clique aqui ~ Preview ~ agora Lets Go!

Vá até o HTML do seu blog e procure por  ]]></b:skin> e acima dele cole:
@-WEBKIT-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
@-MOZ-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
@-O-KEYFRAMES AWAKE {
10% {-WEBKIT-TRANSFORM: TRANSLATEY(-5PX);}
100% {-WEBKIT-TRANSFORM: TRANSLATEY(-10PX);}
100% {-WEBKIT-TRANSFORM: SCALE(1.1);}
0% {-WEBKIT-TRANSFORM: ROTATE(-5DEG); }
25% {-WEBKIT-TRANSFORM: ROTATE(40DEG); }
100% {-WEBKIT-TRANSFORM: ROTATE(-40DEG); }
}
.AWAKE {-WEBKIT-TRANSITION: .7S; BORDER-RADIUS: 10PX; BOX-SHADOW: 1PX 1PX #D6D6D6;BOX-SHADOW: INSET 0 0 18PX #FFE4E1, 0 0 3PX #FFD1CC}
.AWAKE:HOVER {-WEBKIT-ANIMATION: AWAKE .7S ALTERNATE INFINITE LINEAR;
BOX-SHADOW: INSET 0 0 18PX #FFE4E1, 0 0 3PX #FFD1CC;BORDER-RADIUS: 35PX;}

Agora salve e vá ate Layout e abra um novo gadget de HTML/JavaScript e cole:
<A HREF="ENDEREÇO DE URL"><TITLE="NOME"<IMG CLASS="AWAKE" SRC="LINK_DA_IMAGEM" /></A>

Arrume as partes destacadas em negrito salve o gadget e prontinho!!!

8 comentários:

  1. Nossa , que efeito fofo. Adorei muito.

    ResponderExcluir
  2. Ooi. Estou bem, e você? Esse efeito é muito fofo >3< e o blog Pequena Garota é um dos que eu frequentava bastante. Até a próxima, haha.

    http://www.biancalucena.blogspot.com.br/ - Dica Beauty

    ResponderExcluir
    Respostas
    1. Que bom. Eu estou bem obrigada. É realmente uma gracinha. Hihi o Pequena Garota é um dos meus favoritos, apesar das circunstancia. Ate loguinho Bi!

      Excluir
  3. Que lindo!

    http://penseeadistance.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Verdade é sim. <3 Obrigada por comentar.

      Excluir