这一节主要涉及2个动画效果，一个是天上的星星闪烁，一个是桥下的水波左右晃动，具体可以观察右边的效果展示区域
星星部分：
布局上来说没什么难点，一共有6个div元素，背景都是同一张图片，通过left与top修改每一个div的坐标点。唯一的动画就是闪烁，实现上有3种手段
水波部分：
布局上4个div元素并且每个元素赋予不同的图片，同样的也是通过absolute定位，top与left赋予坐标。水波的动作也是很简单，就是两边不断的移动，实现上也有很多方式
区别transition与animation的使用
transition与animation用的很多，这里简单的描述下不同点，transition需要事件触发，animation可以直接自动触发，而且功能上更为强大，包括可以设置不同时间段的动画规则，还有状态的控制，事件等等。
星星与水波动画有个共同的特点
所以针对这个相同点，最终采用了最简单的animation处理。 星星来说可以增加一个opacity变化的的关键帧，1到0重复变化就能达到一个闪烁的效果，水波可以设定translateX变化的值，可以实现左右晃动的效果。需要注意的是，每一个元素的动画执行会有个先后循序，所以需给每一个元素分别单独设置animation-delay延时这个属性。
在代码编辑器pageC.css文件中第182、188、194、200、206、212行填写animation动画使星星闪动起来
-webkit-animation-duration: 5s; -moz-animation-duration: 5s;
请验证，完成请求
由于请求次数过多，请先验证，完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报
实战
实战
实战
实战
实战
