html摩天轮效果,用CSS3 animation模拟摩天轮旋转动画效果
本次我们将开发一个简单又非常有趣的动态展示效果。该动画完全依赖于CSS 的 animation 功能。资源库中的代码让我们能够轻松获取初始框架，并在此基础上做了些许改进和优化工作。
完成后的效果——旋转效果 (github pages打开特别慢，要等一下)
主要的方法由三步组成：
1、让背景图片在十秒内完成360度旋转，模拟出摩天轮的旋转效果；
2、将三张人物图片定位在背景图上，随背景转动；
在三张图片上附加一个动画效果，在十秒内完成角色图像以逆时针方向完成一次完整旋转，并确保所有角色图像始终垂直于水平基准线
HTML代码：
第一步代码：
div.container{
margin: 100px auto;
width: 800px;
position: relative;
-webkit-animation: rotate 10s infinite linear;
-o-animation: rotate 10s infinite linear;
animation: rotate 10s infinite linear;
}
@keyframes rotate{
0%{
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
}
}
原本作者的代码是为了为背景设置一个持续1秒（1s）的动画效果，在该动画时效期内旋转36,000度（36, 36, 36, 36, 36, 36,
degrees），从而达到相同的视觉效果。这一设计虽巧妙但存在明显的缺陷：经过1秒后就停止运行（ animation stops after 1 second），显然这一方法难以满足实际需求。而且随着循环次数增多（increasing iterations），这种方法会导致旋转速度不断加快（incremental rotation speed），最终可能导致系统性能出现问题（system performance degradation）。由此可见该方案不可行。
解决办法极为简单。 animation具有infinite属性。 设置后, 动画将无限循环运行。 随后的人像图按逆时针方向旋转也同样采用此方法设置。
第二步代码：
img:nth-child(2){
position: absolute;
top: 80px;
left: 400px;
animation: re-rotate 10s infinite linear;
-webkit-animation: re-rotate 10s infinite linear;
-moz-animation: re-rotate 10s infinite linear;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
}
img:nth-child(3){
position: absolute;
top: 700px;
left: 400px;
animation: re-rotate 10s infinite linear;
-webkit-animation: re-rotate 10s infinite linear;
-moz-animation: re-rotate 10s infinite linear;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
}
img:nth-child(4){
position: absolute;
top: 300px;
left: 0px;
animation: re-rotate 10s infinite linear;
-webkit-animation: re-rotate 10s infinite linear;
-moz-animation: re-rotate 10s infinite linear;
transform-origin:top center;
-webkit-transform-origin:top center;
-moz-transform-origin:top center;
}
这部分很简单，没什么好说的，就是兼容问题写了一堆代码，看起来有点烦。
第三步代码：
@keyframes re-rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
下一步与上一步相同，在指定动画比例时，在keyframes属性中详细配置。
综上所述，这就是这个动画项目的完整代码。其实不复杂，并且非常有趣。类似的动画应用范围相当广泛，并且适合各种场景分享给各位朋友