Jornada ao Oeste para o Céu Celestial

Introdução

Neste projeto, você aprenderá como criar uma sequência animada usando CSS. O projeto é baseado na história de um grupo de discípulos que partem em uma jornada para o Céu Ocidental em busca das escrituras budistas. No entanto, eles são imobilizados no meio do caminho por demônios, e um personagem chamado Tom usa CSS para salvá-los, permitindo que os discípulos continuem sua jornada para o Oeste.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar os quadros de animação para os personagens na cena
• Como definir os keyframes de animação para cada personagem para criar a ilusão de movimento
• Como fazer as animações se repetirem infinitamente para criar uma animação contínua e perfeita

🏆 Conquistas

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

• Utilizar animações CSS para criar efeitos visuais dinâmicos e envolventes
• Coordenar múltiplas animações para criar uma sequência de animação coesa e sincronizada
• Otimizar animações para desempenho e responsividade

Configurar a Estrutura do Projeto

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

├── css
│   └── style.css
├── images
│   ├── background.webp
│   ├── west_01.png
│   ├── west_02.png
│   ├── west_03.png
│   └── west_04.png
└── index.html

Onde:

• index.html é a página principal.
• images é a pasta de imagens.
• css é a pasta de css.

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

Ao visualizar a página index.html no navegador, você notará que a animação só é reproduzida uma vez e depois para. O efeito da página é o seguinte:

Configurar os Quadros da Animação

Nesta etapa, você aprenderá como configurar os quadros de animação para os personagens no projeto Jornada ao Oeste para o Céu Celestial.

1. Abra o arquivo css/style.css no editor de código e você pode ver que a1, a2, a3, a4 são as quatro regras @keyframes que foram dadas, e que a regra @keyframes define a sequência de animação. Esses keyframes definem a animação para cada personagem, movendo a imagem de fundo horizontalmente para criar a ilusão de movimento.
2. Na regra .actor:first-child, altere para o seguinte código para animar o primeiro personagem:

animation: a1 0.8s steps(8) infinite;

Isso fará com que a animação do primeiro personagem se repita infinitamente, com cada quadro durando 0,8 segundos e a animação tendo 8 passos.

3. Na regra .actor:nth-child(2), altere para o seguinte código para animar o segundo personagem:

animation: a2 0.8s steps(8) infinite;

Isso fará com que a animação do segundo personagem se repita infinitamente, com cada quadro durando 0,8 segundos e a animação tendo 8 passos.

4. Na regra .actor:nth-child(3), altere para o seguinte código para animar o terceiro personagem:

animation: a3 0.8s steps(8) infinite;

Isso fará com que a animação do terceiro personagem se repita infinitamente, com cada quadro durando 0,8 segundos e a animação tendo 8 passos.

5. Na regra .actor:last-child, altere para o seguinte código para animar o quarto personagem:

animation: a4 0.8s steps(8) infinite;

Isso fará com que a animação do quarto personagem se repita infinitamente, com cada quadro durando 0,8 segundos e a animação tendo 8 passos.

6. Salve o arquivo style.css.

Agora, ao visualizar o arquivo index.html no navegador, você deverá ver as animações dos personagens se repetindo infinitamente.

Resumo

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