Skip to content
22/06/2010 / Danresa Consultoria de Informática

Animação de um Carro com CSS3

Animação de um Carro com CSS3

Com CSS3 será possível criar pequenas animações através de HTML e CSS usando a propriedade transition. Partindo desse princípio, o desenvolvedor Koller Jürgen criou uma simples animação de um carro que “passeia” pela tela quando o usuário coloca o mouse sobre ele. O código é muito simples e bastam apenas 2 imagens para obter o resultado final:

1.<a href="#">
2.    <img src="car.jpg" /> <!--Imagem do carro-->
3.    <img src="gear.png" /> <!--Imagem da roda-->
4.    <img src="gear.png" /> <!--Imagem da roda-->
5.</a>

Após basta definir algumas regras no CSS:

01./* Velocidade da animacao */
02.img{
03.    -webkit-transition: all 3.1s ease-in-out;
04.    transition: all 3.1s ease-in-out;
05.}
06. 
07./* Animacao do Carro */
08.a:hover img:nth-of-type(1) {
09.    -webkit-transform: translate(700px,0px) rotate(0deg);
10.    transform: translate(700px,0px) rotate(0deg);
11.}
12. 
13./* Animacao das rodas */
14.a:hover img {
15.    -webkit-transform: translate(700px,0px) rotate(1000deg);
16.    transform: translate(700px,0px) rotate(1000deg);
17.}

Agora o resultado final. Artigo original: CSS3 Car Animation

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: