CSS3制作旋转的风车2

效果图：

html

<div class="box">
    <div class="point"></div>  
    <div class="leaf leaf1"></div>
    <div class="leaf leaf2"></div>
    <div class="leaf leaf3"></div>
    <div class="leaf leaf4"></div>
</div>

css

.box{
    width: 400px;
    height: 400px;
    position: relative;
    margin: 200px auto;

    animation:  xuanzhuan 2s infinite linear;
}
.box:hover{
    animation-play-state:paused;/*当鼠标按下时暂停*/
}
.leaf{
    width: 200px;
    height: 100px;
    position: absolute;
    transform-origin: 100% 100%;
    border-radius: 100px 100px 0 0;
    margin-top: 100px;
}
.leaf1{
    background: #39a6fa;
}
.leaf2{
    background: #fd3327;
    transform: rotate(90deg);
}
.leaf3{
    background: #ffcf24;
    transform: rotate(180deg);
}
.leaf4{
    background: #0eb956;
    transform: rotate(270deg);
}
.point{
    width: 12px;
    height: 12px;
    background: #000;
    border-radius: 12px;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 99;
    margin: -6px 0 0 -6px;
}
@keyframes xuanzhuan{
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}