[TUTORIAL] Logo Movimentável

Item: [TUTORIAL] Logo Movimentável
Rating: 1

por Make Seg 30 Jul - 9:03

Logo Movimentável

O seguinte tutorial está fornecendo um código que faz com que a logo de seu fórum se movimente ao passar o mouse.

-->Tutoriais <--
Movimentação da Logo

1º - Adicionar á Folha de Estilo CSS:
Abra seu painel de controle -> Visualização -> Imagens e Cores -> Cores -> Folha de Estilo CSS.
Copie e cole o Código CSS abaixo de acordo com a versão de seu fórum:

PhPBB3

Código:: #logo img{ display: block; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } #logo img:hover { -webkit-transform:translate(80px); -moz-transform: translate(80px); -o-transform:translate(80px); }

PhPBB2

Código:: img#i_logo{ display: block; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } img#i_logo:hover{ -webkit-transform:translate(80px); -moz-transform: translate(80px); -o-transform:translate(80px); }

PunBB

Código:: #pun-intro a img{ display: block; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } #pun-intro a img:hover{ -webkit-transform:translate(80px); -moz-transform: translate(80px); -o-transform:translate(80px); }

Invision

Código:: div#logostrip a img { display: block; -webkit-transition-duration: 2s; -moz-transition-duration: 2s; -o-transition-duration: 2s; transition-duration: 2s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } div#logostrip a img { -webkit-transform:translate(80px); -moz-transform: translate(80px); -o-transform:translate(80px); }

2º - Veja o resultado:

Observação: O resultado não é totalmente igual ao da imagem.

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Logo Movimentável