去回答
飞鸟动画也跟小男孩动画一样，通过精灵与transition的组合实现
在页面增加一个鸟的HTML结构
<div class="bird"></div>
CSS布局比较简单，通过background-position加载精灵图，做动画的元素都是需要设置position：absolute这样才能独立漂浮文档流，让页面的重绘更少
图片变化部分采用的是CSS3的animation，通过设置animation-timing-function: step-start;马上跳到动画每一帧结束的状态，这样就让动画执行一帧一帧的切换效果
@-webkit-keyframes bird-slow {
0% { background-position: -182px 0px; }
50% {background-position: 0px 0px;}
75% {background-position: -91px 0px;}
100% {background-position: -182px 0px;}
}
以上是4个变化点，但是实际上我们只有3张图，0% 100%是最后一帧，这是因为设置step-start了的缘故，注意下这个写法就可以了
移动部分就很简单，我们移动left或者right的值，距离就是一个页面单位，注意下正负取值
具体的实现，可以参考下源码部分
在pageB.css文件中，代码第87和92行分别填写代码，实现鸟飞的动作
0% {
background-position: -182px 0px;
}
50% {
background-position: 0px 0px;
}
75% {
background-position: -91px 0px;
}
100% {
background-position: -182px 0px;
}
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
