Поход на Запад в Небо

Введение

В этом проекте вы научитесь создавать анимированную последовательность с использованием CSS. Проект основан на истории группы учеников, которые отправились в путь к Западному Небу, чтобы найти буддийские скрипты. Однако, они были задержаны напополам демонами, и персонаж по имени Том использовал CSS, чтобы их спасти, позволив ученикам продолжить свое путешествие на Запад.

👀 Предпросмотр

🎯 Задачи

В этом проекте вы научитесь:

• Как настраивать кадры анимации для персонажей на сцене
• Как определить ключевые кадры анимации для каждого персонажа, чтобы создать иллюзию движения
• Как заставить анимации бесконечно повторяться, чтобы создать непрерывную, безперебойную анимацию

🏆 Достижения

После завершения этого проекта вы сможете:

• Использовать CSS-анимации для создания динамичных и привлекательных визуальных эффектов
• Координировать несколько анимаций, чтобы создать целостную, синхронизированную последовательность анимации
• Оптимизировать анимации для производительности и отзывчивости

Настройте структуру проекта

Для начала откройте экспериментальную среду, и структура каталогов будет выглядеть следующим образом:

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

где:

• index.html - главная страница.
• images - папка с изображениями.
• css - папка с CSS.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

При предварительном просмотре страницы index.html в браузере вы заметите, что анимация воспроизводится только один раз и затем останавливается. Эффект страницы выглядит так:

Настройте кадры анимации

В этом шаге вы научитесь настраивать кадры анимации для персонажей проекта "Поход на Запад в Небо".

1. Откройте файл css/style.css в редакторе кода, и вы увидите, что a1, a2, a3, a4 - это четыре правила @keyframes, которые уже заданы, и правило @keyframes определяет последовательность анимации. Эти ключевые кадры определяют анимацию для каждого персонажа, перемещая фон изображения по горизонтали, чтобы создать иллюзию движения.
2. В правиле .actor:first-child измените код на следующий, чтобы анимировать первого персонажа:

animation: a1 0.8s steps(8) infinite;

Это заставит анимацию первого персонажа бесконечно повторяться, при этом каждый кадр будет длиться 0,8 секунды, и анимация будет состоять из 8 шагов. 3. В правиле .actor:nth-child(2) измените код на следующий, чтобы анимировать второго персонажа:

animation: a2 0.8s steps(8) infinite;

Это заставит анимацию второго персонажа бесконечно повторяться, при этом каждый кадр будет длиться 0,8 секунды, и анимация будет состоять из 8 шагов. 4. В правиле .actor:nth-child(3) измените код на следующий, чтобы анимировать третьего персонажа:

animation: a3 0.8s steps(8) infinite;

Это заставит анимацию третьего персонажа бесконечно повторяться, при этом каждый кадр будет длиться 0,8 секунды, и анимация будет состоять из 8 шагов. 5. В правиле .actor:last-child измените код на следующий, чтобы анимировать четвертого персонажа:

animation: a4 0.8s steps(8) infinite;

Это заставит анимацию четвертого персонажа бесконечно повторяться, при этом каждый кадр будет длиться 0,8 секунды, и анимация будет состоять из 8 шагов. 6. Сохраните файл style.css.

Теперь, при предварительном просмотре файла index.html в браузере вы должны увидеть, как анимации персонажей бесконечно повторяются.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.