摩天轮小动画
2016-11-03 本文已影响0人
TsingXu
在前端网上看到别人写了这么一个小动画，就拿来模仿练习下。
学到的知识点：
1、 @keyframes
2、animation属性
一：首先，@keyframes属性，指定动画名称和动画效果。
用法：@keyframes animation-name { 动画效果 }
或者
具体可以参照：[http://www.w3chtml.com/css3/rules/@keyframes.html]
二、animation属性
具体参照：[http://www.w3chtml.com/css3/properties/animation/animation.html]
这个例子的重点就是这两个属性。下面就是动画的代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>摩天轮</title>
<style>
.mtl{
width: 170px;
height: 220px;
}
.panel{
width:114px;
height: 142px;
position: relative;
top: 80px;
left: 50px;
}
.cars{
width: 163px;
height: 163px;
position: absolute;
top: 24px;
left: 35px;
}
.cars img{
position: absolute;
}
.car1{
left:65px;
top: -12px;
}
.car2{
left: 121px;
top: 15px;
}
.car3{
left: 145px;
top:65px;
}
.car4{
left: 121px;
top:120px;
}
.car5{
left: 65px;
top:140px;
}
.car6{
left: 10px;
top:120px;
}
.car7{
left: -10px;
top:65px;
}
.car8{
left: 10px;
top:15px;
}
.cars{
animation: cars 5s linear 1s infinite;
}
.c{
animation: car 5s linear 1s infinite;
}
@keyframes car{
0% { transform:rotate(0deg); }
100% { transform:rotate(-360deg); }
}
@keyframes cars{
0% { transform:rotate(0deg); }
100% { transform:rotate(360deg); }
}
</style>
<div class="mtl">
<img src="panel.png" class="panel">
<div class="cars">
<img src="wheel.png" class="wheel">
<img src="car1.png" class="car1 c">
<img src="car2.png" class="car2 c">
<img src="car1.png" class="car3 c">
<img src="car2.png" class="car4 c">
<img src="car1.png" class="car5 c">
<img src="car2.png" class="car6 c">
<img src="car1.png" class="car7 c">
<img src="car2.png" class="car8 c">
</div>
</div>
</body>
</html>
不积跬步无以至千里
