Tutorial: Efeito Gira

| |
Achariam legal fazer uma pagina para o blog?

Yoo
Vou começar a postar os efeitos que criei. Esse efeito Gira eu criei a pouco tempo pois fui mudar um código em um outro efeito que tinha e saiu isso,então acabei deixando assim. Você pode ver AQUI no blog de Tutoriais. Se tiver algum efeito semelhante é coincidência, pois não copiei de ninguém.  O primeiro efeito que fiz aprendi em um blog que não me lembro o nome, pois foi a muito tempo. Não liguem para o  Layout de tutoriais pois estava com preguiça de fazer um descente há há.


 Vá em editar HTML e procure por ]]></b:skin> e acima cole: 

gira {
float: left;
background-color: #CECECE;
height: 43px;
margin-right: 10px;
border: 4px white solid;
}
.gira:hover{
float: left;
background-color: #CECECE;
height: 43px;
margin-right: 10px;
border: 4px white solid;
-webkit-transform: rotateZ(-1080deg);
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transform: rotateZ(-600deg);
-moz-transition: -moz-transform 2s ease-in-out;
-o-transform: rotateZ(-6deg);
-o-transition: -o-transform 2s ease-in-out;
-ms-transform: rotateZ(-6deg);
-ms-transition: -ms-transform 2s ease-in-out;
transform: rotate(-60deg);
transition: transform 2s ease-in-out;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-repeat: no-repeat;
background-position: center;
background-size: 60%;
-webkit-backface-visibility: hidden;
}
Troque pela altura e largura que você quer onde está destacado de Roxo.
Visualize e se estiver tudo certo salve.

Em  gadget de HTML/JavaScript, cole:

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="gira"/></a>

Agora é só substituir onde está destacado e pronto. 

8 comentários:

  1. Eu adorei o efeito, vou deixar nos favoritos, talvez eu use *u* Acharia legal a page eu curtiria o/
    Kissu O (≧ ∇ ≦) O #May-Sun

    Nosso Diário Nada Convencional

    ResponderExcluir
  2. Gostei do efeito Mhy-chan :3
    E o lay tá bonito sim u-u

    E inclusive não é só o de lá, esse aqui tá DIWO *-------*

    ResponderExcluir
    Respostas
    1. Ahh, e sobre a página... Sim, eu acharia legal ^-^

      Excluir
    2. Obrigada Thay :) Posso te chamar assim? Achei bonitino kkkkkkkkk
      Talvez eu faça a pagina então

      Excluir
  3. Eeeeh õ/ Mhy-chan aprovou minha ideia ... Ou melhor nossa *o*
    O efeito é perfeito *O*

    ResponderExcluir
  4. Ameii de ♥ esse post seu e também o lay
    Ficou Divoo♥♥

    ResponderExcluir

» Fiquem à vontade
» Respeite a todos e não ofenda ninguém
» Não gostou do blog? Não precisa sair xingando ofendendo todo mundo, aceitamos sugestões, mas tenha educação.
» Caso não obedeça às regras seu comentário não será publicado