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: 0;
    padding: 0;
}

#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: 0;
    height: 0;
    z-index: 2;
    border: 50px solid lightcoral;
    border-color:lightcoral transparent  transparent   transparent  ;
}
.ye{
    transform: rotate(0deg);
    position: absolute;
    left: 0px;
    top:5px
    float: left;
    width: 0;
    height: 0;
    border: 80px solid #D9B300;
    z-index: 2;
    border-color: transparent  transparent   transparent  #D9B300;
}

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

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

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

.blue1{
    transform: rotate(-44deg);
    position: absolute;
    left: 102px;
    top: 23px;
    float: left;
    width: 0;
    height: 0;
    z-index: 2;
    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: 2;
    float: left;
    width: 0;
    height: 0;
    border: 81px solid #01814A;
    border-color: #01814A transparent  transparent   transparent ;
    z-index: 2;
    
}

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

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


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

View Code