我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛

思路

风车有四个轮子，都是三角形，需要创造四个三角形
风车会转动，可以用css动画

三角实现

css画三角形有好几种方式，今天我们就用边框来画

我们只需要把边框设置50px，那么就会得到一个50×50的正方形，我们再把他的其他的两个边变成透明，那么就得到了一个三角形

上代码

HTML中，我们用li做为风车的叶子

<div id="app">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

css css采用flex布局，对于li特殊处理，附上不同的颜色

#app {
    width: 200px;
    margin: 100px auto;
}

#app>ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 200px;
    height: 200px;
}

#app>ul>li:nth-child(1) {
    border: 50px solid #f73833;
    border-left: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

#app>ul>li:nth-child(2) {
    border: 50px solid #77fefc;
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
}

#app>ul>li:nth-child(3) {
    border: 50px solid #fdfb36;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
}

#app>ul>li:nth-child(4) {
    border: 50px solid #a3f93b;
    border-top: 50px solid transparent;
    border-right: 50px solid transparent;
}

此时的页面效果

动画

动画我们采用css关键帧@keyframes

我们只需要让他从0度，旋转到360度就可以，这样要用到transfrom的rotate属性

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

这样就定义了一个动画，他会从0度旋转到360度，完成一周

我们需要把动画给ul添加上

ul {
    animation: rotate 3s linear infinite
}

第一个参数是动画名称，第二个是完成一次动画需要的时间，第三次是匀速动画，第四个是一直重复动画

我们看一下此时的界面

我把代码放到了码上掘进，大家快来看看吧希望这个小风车能陪着你清凉一夏，有个快乐的心情，找到好工作，美好的事情全在你身上，不好的全走开，谢谢各位，给个赞吧，谢谢

夏天到了，css画一个风车清凉一夏

思路

三角实现

动画