今天学习了CSS3的动画属性，实现的效果很炫酷，练习了一个很漂亮的简单的动态摩天轮，忍不住分享出来，忍不住想要去坐真的摩天轮啦，嘻嘻嘻~
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;}
body,html{height: 100%;}
body{
background:url(img/2.jpg) no-repeat;
background-size: cover;
}
.box,.content{
width:768px;
height:768px;
position: fixed;
top: 50%;
left: 50%;
margin: -384px 0 0 -384px;
}
.img1{
position: absolute;
top: 50%;
left: 0;
right: 0;
margin: auto;
}
.img2{
animation:wheel 20s linear infinite;
}
.img2,.img3{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom:0;
margin: auto;
}
/*小孩的父元素*/
.content img{
position: absolute;
animation: kids 20s linear infinite;
}
/*第一个小孩，位置是在top为0，左右居中位置*/
.content img:nth-child(1){
top: 0;
right: 0;
left: 0;
margin: auto;
}
/*第二个小孩，位置是在bottom为0，左右居中位置*/
.content img:nth-child(2){
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*第三个小孩，位置是在lfet为0,上下居中位置*/
.content img:nth-child(3){
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
/*第四个小孩，位置是在right为0，左右居中位置*/
.content img:nth-child(4){
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
/*第五个小孩，位置是在左上角位置*/
.content img:nth-child(5){
top: 70px;
left:70px;
}
/*第六个小孩，位置是在右上角位置*/
.content img:nth-child(6){
top: 70px;
right:70px;
}
/*第七个小孩，位置是在左下角位置*/
.content img:nth-child(7){
bottom: 70px;
left:70px;
}
/*第八个小孩，位置是在右下角位置*/
.content img:nth-child(8){
bottom: 70px;
right:70px;
}
.content{
animation:wheel 20s linear infinite;
}
/*轮子与孩子的父元素都是正向转*/
@keyframes wheel{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
/*想要实现轮子转而小孩一直是头朝上，就得同时让小孩往相反的方向转*/
@keyframes kids{
from{transform: rotate(0deg);}
to{transform: rotate(-360deg);}
}
</style>
</head>
<body>
<div class="box">
<img class="img1" src="img/bracket.png"/> <!--支架-->
<img class="img2" src="img/fsw.png"/><!--轮子-->
<img class="img3" src="img/big-title.png"/><!--标题-->
</div>
<div class="content"> <!--小孩的父元素-->
<img src="img/boy.png"/>
<img src="img/dog.png"/>
<img src="img/girl.png"/>
<img src="img/girls.png"/>
<img src="img/hairboy.png"/>
<img src="img/mimi.png"/>
<img src="img/mudog.png"/>
<img src="img/shamegirl.png"/>
</div>
</body>
</html>
效果图如下图所示：
做这个效果其实并不难，难的是要有思路，刚开始我也是一头雾水，多做几个就好了，慢慢得思路就会清晰啦~
