设置动画帧
在这一步中,你将学习如何为“西天取经”项目中的角色设置动画帧。
- 在代码编辑器中打开
css/style.css
文件,你会看到已经给出了 a1
、a2
、a3
、a4
这四个 @keyframes 规则,并且 @keyframes
规则定义了动画序列。这些关键帧为每个角色定义了动画,通过水平移动背景图像来营造运动错觉。
- 在
.actor:first-child
规则中,将代码更改为以下内容,为第一个角色设置动画:
animation: a1 0.8s steps(8) infinite;
这将使第一个角色的动画无限循环,每一帧持续 0.8 秒,动画有 8 步。
- 在
.actor:nth-child(2)
规则中,将代码更改为以下内容,为第二个角色设置动画:
animation: a2 0.8s steps(8) infinite;
这将使第二个角色的动画无限循环,每一帧持续 0.8 秒,动画有 8 步。
- 在
.actor:nth-child(3)
规则中,将代码更改为以下内容,为第三个角色设置动画:
animation: a3 0.8s steps(8) infinite;
这将使第三个角色的动画无限循环,每一帧持续 0.8 秒,动画有 8 步。
- 在
.actor:last-child
规则中,将代码更改为以下内容,为第四个角色设置动画:
animation: a4 0.8s steps(8) infinite;
这将使第四个角色的动画无限循环,每一帧持续 0.8 秒,动画有 8 步。
- 保存
style.css
文件。
现在,当你在浏览器中预览 index.html
文件时,应该会看到角色的动画在无限循环。