Tutorial: Efeito Bee

| |

Yoo
O Efeito Bee eu não me lembro onde vi e NÃO fui eu que fiz,eu apenas modifiquei algumas coisas. Infelizmente não sei de onde é então se for de sua autoria avise para que eu apague ou coloque os créditos. Esse é o efeito que utilizei em alguns antigos layouts daqui. Você pode ver o exemplo AQUI



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

.bee {

.bee {
margin-top: 10px;
margin-right: 10px;
-webkit-transform: rotateZ(-6deg);
-webkit-transition: -webkit-transform 1s ease-in-out;
-moz-transform: rotateZ(-6deg);
-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(-6deg);
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: 50%;
-webkit-backface-visibility: hidden;
}
.bee:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(4deg);
-o-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(20deg);
}
 Troque pela altura e largura que você quer onde está destacado de roxo.
Visualize e se estiver tudo certo salve.

<a href="LINK" title="Nome do blog"><img src="LINK DA IMAGEM" class="bee"/></a>
Agora é só substituir onde está de roxo e pronto. 

Nenhum comentário:

Postar um comentário

» 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