摩天轮小动画

作者: TsingXu | 来源:发表于2016-11-03 20:20 被阅读0次

摩天轮小动画
摩天轮
摩天轮的爱情 -
渤海之眼
随遇而安的旅途：广州塔摩天轮
✿雌蕊花艺✿时光轮回，让幸福蔓延至每个春夏秋冬
合成动画
随笔
摩天轮
梦幻摩天轮｜作者/江雪〖原创新诗（283）〗

在前端网上看到别人写了这么一个小动画，就拿来模仿练习下。

学到的知识点：
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>