用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写彩虹的样式。
1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览
2、彩虹样式，彩虹有一个左右摇摆的动画效果
3、投影样式，别忘了是同样有动画的哟
搞定，很简单有没有，跟着实现一遍，你也可以画出美丽的彩虹咯~
在Web里做动画选择其实已经很多了：可以用 Flash 技术来做动画
可以用 GIF 来做一个无需交互的动画
可以用 CSS3 的 animation
也可以用 CSS3 的 transition
也可以用 SVG 来做动画
甚至 CSS2 的hover也可以实现简单的动画
还可以用通过在 Canvas 上作图来实现动画
也可以借助jQuery.animate方便地实现动画
Flash动画
不可否认，目前为止，Flash制作的动画在互联网还是占据了庞大的数量，几乎可以实现任何你想要的动画，甚至很多复杂的游戏都是用Flash实现，如果不是随着移动端的兴起，估计Flash会一直火热下去。
GIF动画
在以前，对于一些广告动画和一些小的icon动画之类的，GIF确实是不错的选择，体积还可以接受，制作也简单。但有GIF有一个致命的弱点就是不支持交互以及高清晰度的渲染，逐步的被JS和CSS3所替代。
CSS Hover动画
通过:hover我们可以实现一个滑动逐级展现的菜单，虽然非常简单，但这个是动画的雏形，在hover中，我们几乎可以为元素应用所有的css属性，并且兼容性不错。不过在ie6下只有a标签支持:hover。
Javscript动画
因为没有其它可用的实现方式，最初的前端动画都是JS来实现，实现上就是通过一个定时器setInterval每隔一定时间来改变元素的样式，动画结束时clearInterval即可。
尽管这种方式动画的可控性很强，但是问题也很明显：
1.性能不佳，因为需要不断获取和修改Dom的布局，所以导致了大量页面重排（repaint）。
2.缺乏标准，不同的库使用了不同的API，导致即使是简单的动画也有各不相同的实现方式，调整起来比较耗时。
3.带宽消耗，一个简单动画也需要引入一个类库，相对丰富的动画，代码量都很大，结果就是增加了http请求的大小，降低了页面的载入时间。
CSS3动画
CSS3动画相比与JS更轻量，性能更好，更易于实现，同时也不必担心缺乏标准和增加带宽消耗的问题。animation 相比 transtion 使用起来更为复杂，但也提供了更多的控制，其中最重要的就是 frame 的支持，不过通过一些简单的JS库
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction同时设置多个属性
举例 等待条：
效果：
