html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果

这次我们来实现一个简单又很有意思的动画效果，完全由CSS 的animation来实现，素材和源码来自于其他网站，个人对源码做了一些改动优化

完成后的效果——旋转效果 (github pages打开特别慢，要等一下)

主要的方法由三步组成：

1、让背景图片在十秒内完成360度旋转，模拟出摩天轮的旋转效果；

2、将三张人物图片定位在背景图上，随背景转动；

3、为三张图片额外创建一个animation，让人物图片在十秒内逆时针旋转360度，这样人物图自始至终都是垂直于水平线。

HTML代码：

第一步代码：

div.container{

margin: 100px auto;

width: 800px;

position: relative;

-webkit-animation: rotate 10s infinit