Como criar imagens em movimento com CSS

Escrito por max power | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como criar imagens em movimento com CSS
As regras CSS permitem aos designers posicionarem imagens animadas por cima das estáticas (Comstock/Comstock/Getty Images)

O uso de folhas de estilo em cascata (CSS) permite ao webdesigner criar imagens animadas. O designer utiliza regras CSS para posicionar elementos gráficos, tanto estáticos (que não se movem) quanto dinâmicos (em movimento). Isso cria a impressão de movimento na tela do navegador. Você pode criar este conteúdo dinâmico sem usar arquivos gráficos separados e grandes.

Outras pessoas estão lendo

Instruções

  1. 1

    Recorte a parte animada da sua imagem em movimento usando o programa gráfico da sua escolha. Salve a animação e o resto da imagem separadamente. Você terá agora dois arquivos, um com a animação e o outro com uma imagem estática.

  2. 2

    Crie um novo documento web e estilize um "div" mestre com uma nova regra CSS. Um "div" é um elemento individual em um site, e este, em particular, envolverá todo o seu código. No exemplo, será criado um "div" que ocupará toda a tela do visitante do site usando as propriedades "position" (posicionamento), "width" (largura) e "height" (altura).

    .masterDiv { position: relative; width: 100%; height: 100%; }

  3. 3

    Escreva as regras para o seu elemento gráfico, que conterá como fundo as partes não animadas da imagem. Use a propriedade "padding" (espaçamento) para ajustar a posição da parte animada da imagem. Neste exemplo, o espaçamento superior será de 300 pixels, o direito de 50, o inferior de dez e o esquerdo de 200. Dessa forma, a animação aparecerá na parte inferior direita da imagem, deixando um espaço de 50 pixels à direita e 300 acima:

    img { padding: 300px 50px 10px 200px; background:url(nonAnimatedSection.jpg) no-repeat; }

  4. 4

    Aplique as novas regras ao documento HTML e associe à imagem usando o tag "img", a qual foi estilizada com a regra CSS do exemplo anterior. Substitua o nome de arquivo de origem da animação, "secaoAnimada.gif", pelo seu próprio arquivo.

    <div class="masterDiv"> <img src = "secaoAnimada.gif” alt = "minha imagem em movimento" /> </div>

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível