【黑师音画帖小白教程】第五讲：让帖子子元素动起来
第五讲：让帖子子元素动起来
上一讲我们给帖子容器添加子元素。本讲，我们将让添加到帖子里的小图片动起来，比如旋转——将来它可是多媒体音画帖的音频播放控制器呢。CSS可以设计关键帧动画，旋转、移位、变大变小变颜色都不在话下。要设计关键帧动画，CSS得用上一个特别的选择器 @keyframes，该选择器使用描述性语言描述动画的变化形态或过程。让我们通过代码来理解它：
<style>
/* CSS关键帧动画选择器语法 ：@keyframes + 动画名称 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
@keyframes 是关键帧动画选择器固有关键字，空一格后跟上自定义的运动名称 rot，接着用一组花括号包裹描述运动过程或方式的语句，语句可以很多很多，我们使用相对简单的方法，from ... to ...，从……到……的意思，忘记了的童鞋请找出幼儿园大班英语课本温习一下。你可以让运动形态是从 left: 10px; 到 left: 300px; 发生变化，分别写成 from { left: 10px; } 和 to { left: 300px; }, 这样将位移元素；这里，我们用一个新的属性 transform，它可以产生的运动方式有旋转（rotate）、平移（translate）、缩放（scale）、扭曲（skew），上例我们使用的是 rotate 旋转：从即 from 0deg 到即 to 360deg 实施旋转运动。
设计好动画，我们要在 #mypic 或 .mypic 选择器中调用该动画，调用方法通过属性 animation 来完成。还是看代码来加以理解：
<style>
/* #mypic 选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 8s linear infinite;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
#mypic 选择器多数属性设置是上一讲的内容，仅 animation 需要细细体会，它是调用CSS关键帧动画的一个属性，语法可以非常复杂，也可以用简化的方式使用它（术语称这类简化的使用方式为语法糖）。动画名称得有，rot 是我们在 @keyframes 选择器中设计的名称；一个运动周期的时间长度要有，这里是 8s，8秒的意思，8秒完成一次360度的旋转运动；linear 是匀速之意，这里用来描述运动的缓动形态，匀速、平滑运动，如果缺省则采用 ease 即两头慢中间快的缓动方式；infinite 是数学中的无穷大在CSS中的表达，大到无边无际，你可以用 5 来代替它，效果是旋转 5 次后运动会停下来。
现在我们将帖子容器的选择器以及整个帖子完整的HTML代码整合一下，动画效果就出来了：
<style>
/* 帖子父容器id选择器 */
#mama {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* #mypic 选择器 */
#mypic {
position: absolute; /* 绝对定位 */
left: 20px; /* 左边位置*/
top: 10px; /* 上边位置 */
width: 120px; /* 宽度 */
height: 120px; /* 高度 */
/* animation简化语法 ：动画名称+运动周期时长+缓动形式+运行次数 */
animation: rot 8s linear infinite;
}
/* 设计CSS关键帧动画 */
@keyframes rot {
from { transform: rotate(0deg); } /* 从 0 度开始旋转 */
to { transform: rotate(360deg); } /* 到 360 度即一圈完成一个旋转周期 */
}
</style>
<!-- HTML代码 ：父元素包裹一个子元素 -->
<div id="mama">
<img id="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
下面给出多图运行同一个动画的代码，此代码包含了上一讲作业的答案。代码可以存为本地 .html 文档后运行或拿到 pencil code 直接运行。
<style>
/* 帖子父容器id选择器 */
#papa {
position: relative;
margin: 20px auto;
width: 800px;
height: 450px;
background: url('https://638183.freep.cn/638183/t22/webp/jyiu.webp') no-repeat center/cover;
}
/* 子元素小图片class选择器 */
.mypic {
position: absolute; /* 绝对定位 */
width: 160px;
height: 160px;
animation: rot 8s linear infinite;
}
.mypic:nth-of-type(1) { left: 10px; top: 10px; }
.mypic:nth-of-type(2) { right: 10px; bottom: 10px; }
.mypic:nth-of-type(3) { left: calc(50% - 80px); top: calc(50% - 80px); }
.mypic:nth-of-type(4) { left: 10px; bottom: 10px; }
.mypic:nth-of-type(5) { right: 10px; top: 10px; }
/* 关键帧动画 ：可以省略 from */
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div id="papa">
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
<img class="mypic" alt="" src="https://638183.freep.cn/638183/small/4yc.png" />
</div>
小结：运行动画需要使用关键帧动画选择器 @keyframes 设定一个自定义名称的动画，动画里使用描述元素的一个或多个属性值的方式设计动画，然后在要运行动画的HTML特定元素对应的CSS选择器中使用 animation 属性调用该动画。动画的设计可以使用一切合法的CSS属性，比如 left、top、width、height 以及转换属性 transform 等；animation 属性在调用动画时应给出动画名称（必须）、动画运行周期时长（必须）、缓动效果（可选）、运行次数（可选）等。今后的课程还会对CSS关键帧动画进行其他层面的探讨。
作业：修改本节的演示代码，令四叶草从左上角往左下角运动3次，每一次用4秒钟。提示：使用 top 属性设计 @keyframes 动画，动画设计中不能 top 和 bottom 混用，要统一使用相同的属性，要么都是 top 要么都是 bottom；计算左下角 top 值时，应考虑帖子容器的高度、子元素即图片的高度以及预留空间。
前一篇: 【黑师音画帖小白教程】第四讲：给帖子添加子元素并定位
下一篇: 【黑师音画帖小白教程】第六讲：帖子加入音频并使用旋转的图片“控制”音频
评论列表 [0条]
