css制作旋转风车（transform 篇）

做这个案例之前首先要大概了解CSS的transform的属性

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

看看效果图

打开的时候自动旋转，当鼠标经过的时候加快旋转速度，鼠标移开就恢复原来的速度。

参考代码：（为了美观可以自已加上一直背景图，我这里是空白的背景显得单调）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动画</title>
        <link rel="stylesheet" type="text/css" href="css/animate1.css"/>
    </head>
    <body>

        <div></div>
            <div id="one">

                <div class="sj">

                </div>

                <div class="ye">

                </div>
                <div class="ye1">

                </div>
                <div class="re">

                </div>
                <div class="blue">

                </div>
                <div class="blue1">

                </div>
                <div class="green">

                </div>

                <div class="green1">

                </div>

        </div>

            <div id="mg">

            </div>

            <div>
                <!--<img src="img/1.jpg" id="img"/>-->
        </div>
    </body>
</html>

css:(还有更加简单的方法画出这个风车的，我这里复杂了一点，比较笨重，不够简洁)

*{
    margin:;
    padding:;
}

#s{
    float: left;
}

#one:hover{
    animation:run 0.6s linear infinite;
}

@keyframes run{
from{
    transform: rotate(360deg);
    }
to{
    transform: rotate(0deg);
    }
}
.sj{
    margin-top: 5px;
    transform: rotate(-46deg);
    position: absolute;
    top:14px;
    left: -49px;
    float: left;
    width:;
    height:;
    z-index:;
    border: 50px solid lightcoral;
    border-color:lightcoral transparent  transparent   transparent  ;
}
.ye{
    transform: rotate(0deg);
    position: absolute;
    left: 0px;
    top:5px
    float: left;
    width:;
    height:;
    border: 80px solid #D9B300;
    z-index:;
    border-color: transparent  transparent   transparent  #D9B300;
}

.ye1{
    transform: rotate(0deg);
    position: absolute;
    left: -80px;
    top:78px;
    float: left;
    width:;
    height:;
    z-index:;
    border: 80px solid orange;
    border-color: transparent orange transparent   transparent ;
}

.re{
    transform: rotate(-46deg);
    position: absolute;
    left: 21px;
    top: -61px;
    float: left;
    z-index:;
    width:;
    height:;
    border: 59px solid brown;
    border-color: transparent  transparent   transparent brown;
}

.blue{
    transform: rotate(0deg);
    position: absolute;
    left: 80px;
    top:-79px;
    float: left;
    width:;
    height:;
    z-index:;
    border: 80px solid cornflowerblue;
    border-color:  transparent  transparent   transparent cornflowerblue;
}

.blue1{
    transform: rotate(-44deg);
    position: absolute;
    left: 102px;
    top: 23px;
    float: left;
    width:;
    height:;
    z-index:;
    border: 58px solid lightblue;
    border-color: lightblue transparent  transparent   transparent ;
    animation:gg 1s linear infinite;
}

.green{
    transform: rotate(0deg);
    position: absolute;
    left: 80px;
    top: 80px;
    z-index:;
    float: left;
    width:;
    height:;
    border: 81px solid #01814A;
    border-color: #01814A transparent  transparent   transparent ;
    z-index:;

}

.green1{
    transform: rotate(-45deg);
    position: absolute;
    top:103px;
    left: 23px;
    float: left;
    width:;
    height:;
    border: 57px solid seagreen;
    border-color:  transparent  seagreen transparent   transparent ;
    z-index:;
}

#mg{
    background: salmon;
    width: 15px;
    height: 300px;
    border-radius: 8px;
    position: absolute;
    top:220px;
    left:680px;
    z-index:;
}
#one{
    margin: 150px auto auto auto;
    width: 162px;
    transform: rotate(-45deg);
    height: 162px;
    line-height: 168px;
    text-align: center;
    position: relative;
    z-index:;
    animation:run 9s linear infinite;
}

#img{
    position: relative;
    top:-50px;
    left: 522px;
    z-index: -1;
}