任务目标

使用CSS3动画属性让新云课堂首页轮播图动起来。

任务要求

（1）使用以下代码制作课程推荐页面轮播区域，设定宽1200像素，高400像素。

（2）为轮播部分的.swiper-item对应的元素添加动画样式。

（3）使其可以每5秒一次为间隔进行轮播图片的更换，且不限次数循环执行。首次动画延迟2s。

（4）动画切换速率为ease-in-out。

效果如下图：

任务实施

（1）制作轮播区域页面。

（2）使用轮播部分的div背景图的更换来实现轮播效果。

（3）制作帧动画组合。

（4）绑定帧动画。

教学微课

教学课件

经验分享

在实际项目中，大多数为提高用户与页面的互动而设计的动画，其触发方式大都是选择hover伪类进行，因为用户的主要操作还是以鼠标为主，而具有复杂连贯性的展示型动画，多使用成熟的动画、视频或通用的javascript组件去实现。

扩展实践

1使用动画效果实现指定按钮的果冻式抖动。

2画实现播放效果提示符号。

能量贴士

富贵不能淫，贫贱不能移，威武不能屈，此之谓大丈夫。语出《孟子》。