如何利用CSS画一个大风车

废话少说直接上效果图：

主要是通过设置边框的样式去画的

1.第一步

建一个容器便于每个风叶定位

 <!-- 容器 方便定位每一个风叶 -->
    <div class="box">
        <div class="red"></div>
    </div>

然后就是对应的CSS代码

 .box{
          width: 400px;
            height: 200px;
            margin: 200px auto;
            position: relative;
            border: 1px solid #ddd;
        }
        .red {
            width: 0;
            height: 0;
            border: 100px solid red;       
        }

然后你会得到一个这样的效果图

这样看也能看不出什么效果 ，我们对代码进行一点小小的改动

  .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            //对每个边框的颜色进行独立的设置
            border-left-color: green;
            border-top-color: pink;
            border-right-color:black ;
        }

然后继续写CSS代码

  .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
            position: absolute;
        }

这个时候你就会发现由原来的正方形变成这个样子了（这样大风车的一个风叶就画好了，同理画出下面四个）

继续添加剩下三个div

 <!-- 容器 方便定位每一个风叶 -->
    <div class="box">
        <div class="red"></div>
        <div class="green"></div>
        <div class="blue"></div>
        <div class="pink"></div>
    </div>

CSS代码

 .box {
            width: 400px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ddd;
        }

        .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
        }

        .green {
            width: 0;
            height: 0;
            border: 100px solid green;
            border-right: 0;
            border-top-color: transparent;
        }

        .blue {
            width: 0;
            height: 0;
            border: 100px solid blue;
            border-left: 0;
            border-bottom-color: transparent;
        }

        .pink {
            width: 0;
            height: 0;
            border: 100px solid pink;
            border-bottom: 0;
            border-right-color: transparent;
        }

就差最后一步了，把每个风叶定位到合适的位置(通过绝对定位 position : absolute)

完整代码

 .box {
            width: 400px;
            height: 200px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #ddd;
        }

        .red {
            width: 0;
            height: 0;
            border: 100px solid red;
            border-top: 0;
            border-left-color: transparent;
        }

        .green {
            width: 0;
            height: 0;
            border: 100px solid green;
            border-right: 0;
            border-top-color: transparent;
            position: absolute;
            left: 200px;
            top: -100px;
        }

        .blue {
            width: 0;
            height: 0;
            border: 100px solid blue;
            border-left: 0;
            border-bottom-color: transparent;
            position: absolute;
            left: 100px;
            top: 100px;
        }

        .pink {
            width: 0;
            height: 0;
            border: 100px solid pink;
            border-bottom: 0;
            border-right-color: transparent;
            position: absolute;
            left: 200px;
            top: 100px;
        }

最后风车就画好了

既然是风车怎么能不会旋转呢，可以添加动画来设置旋转

定义一个旋转动画

@keyframes rotateBox {
            form{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }

在类名为box的div上引用

 .box {            
         width: 400px;        
          height: 200px;        
          margin: 200px auto;    
          position: relative;        
          border: 1px solid #ddd;         
         animation: rotateBox 1s infinite  linear; // 动画名  执行一次需要的时间   一直执行  规定动画的速度曲线        }

最后效果图：