一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

大风车呀之悠悠的转~

如图制作一个大风车的h5，可以实现风车一直在转，鼠标悬浮在中心轴上的时候，风车停止转动，鼠标离开之后又开始转动。 其中主要用到了css3中的动画。我们一起看看吧~ 首先回顾一下css动画的基本属性。

一： CSS动画

1.animation 动画

所有动画属性的简写属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

例如：

div { 
    animation: myfirst 5s; 
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */ 
}

• name @keyframes 动画的名称

• duration 动画完成一个周期所花费的秒或毫秒。默认是 0。

• timing-function 规定动画的速度曲线。默认是 "ease"。

  枚举有：

  1. linear 动画从头到尾的速度是相同的。
  2. ease 默认。动画以低速开始，然后加快，在结束前变慢。
  3. ease-in 动画以低速开始。
  4. ease-out 动画以低速结束。
  5. ease-in-out 动画以低速开始和结束。

• delay 动画在启动前的延迟间隔

• iteration-count 动画的播放次数

  枚举有：

  1. n 动画执行n次
  2. infinite 动画无限次播放

• direction 是否应该轮流反向播放动画

• fill-mode 当动画不播放时应用到元素的样式

• play-state 动画是否正在运行或已暂停

2.@keyframes 规则 用来规定动画

@keyframes myfirst { 
    from {background: red;} 
    to {background: yellow;} 
} 
@-webkit-keyframes myfirst /* Safari 与 Chrome */ { 
    from {background: red;} 
    to {background: yellow;} 
}

@keyframes myfirst { 
    0% {background: red;} 
    25% {background: yellow;} 
    50% {background: blue;} 
    100% {background: green;} 
} 
@-webkit-keyframes myfirst /* Safari 与 Chrome */ {
    0% {background: red;} 
    25% {background: yellow;} 
    50% {background: blue;} 
    100% {background: green;} 
}

二：大风车

主要用到2张图片：1.草地 2.风车

html代码：

<main>
    <div></div>
    <div></div>
    <div></div>
</main>

css代码：

// 开启弹性布局
body {
    margin: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
}
// 父元素绝对定位，固定宽度
main {
    background-image: url(caodi.png);
    width: 1300px;
    height: 500px;
    min-width: 1300px;
    background-size: contain;
    position: relative;
    
}
// 子元素相对定位，设置动画
div:first-child {
    width: 350px;
    height: 350px;
    background-image: url(fengche.png);
    background-size: contain;
    position: absolute;
    left: 264px;
    top: 48px;
    animation: rotate 3s linear infinite;
}
div:nth-child(2){
    width: 150px;
    height: 150px;
    background-image: url(fengche.png);
    background-size: contain;
    position: absolute;
    left: 590px;
    top: 290px;
    animation: rotate 3s linear infinite;

}
div:nth-child(3){
    width: 250px;
    height: 250px;
    background-image: url(fengche.png);
    background-size: contain;
    position: absolute;
    left: 730px;
    top: 190px;
    animation: rotate 3s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}
div:hover {
    animation-duration: 1.5s;
}
div:active {
    animation: none;
}

以上就是大风车的实现代码了。是不是很简单，赶快动手制作一个吧~~~