Criando a Animação Orbital da Terra com CSS

Introdução

Neste projeto, você aprenderá como criar uma animação CSS que simula a órbita da Terra ao redor do Sol. Este projeto o ajudará a entender os conceitos de animações CSS e como aplicá-los para criar uma experiência web dinâmica e visualmente envolvente.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a animação para o elemento .earth-con
• Como usar o @keyframes para a animação orbit para criar a rotação da Terra ao redor do centro

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma animação CSS que simula a órbita da Terra ao redor do Sol
• Entender os conceitos de animações CSS e como aplicá-los para criar experiências web dinâmicas e visualmente envolventes
• Coordenar múltiplas propriedades CSS para alcançar o efeito de animação desejado

Configurar a Estrutura do Projeto

Para começar, abra o ambiente de experimento, e a estrutura do diretório é a seguinte:

├── css
│   └── style.css
└── index.html

Onde:

• index.html é a página principal.
• css/style.css é o arquivo CSS onde você precisa adicionar código.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra o "Web 8080" no topo da VM e atualize manualmente a página para ver o seguinte efeito no seu navegador:

Configurar a Animação

Nesta etapa, você aprenderá como adicionar a animação ao elemento .earth-con no arquivo css/style.css.

1. Abra o arquivo css/style.css no editor de código, vá até o final do código e você pode ver que orbit é a regra @keyframes já fornecida e esta regra @keyframes define a sequência da animação.

2. Localize a classe .earth-con no arquivo CSS.

3. Dentro da classe .earth-con, adicione as seguintes propriedades CSS para definir a animação:

   animation: orbit 36.5s linear infinite;

   • animation-name: orbit
   • animation-duration: 36.5s
   • animation-timing-function: linear
   • animation-iteration-count: infinite

Isso fará com que o elemento .earth-con gire em torno do centro da tela, simulando a órbita da Terra ao redor do Sol.

4. Salve o arquivo style.css.
5. Volte para o seu navegador e atualize a página. Você deve ver o seguinte efeito:

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.