我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

今天来实现一下风车等待框吧，代码已放码上掘金！

页面结构

风车等待框有四条杠，我们这里使用无序列表进行实现，无序列表中有四个元素，一个元素代码一条杠

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

初始样式

内容放在body元素中，所以我们先清除body元素的内边距和外边距，同时让他宽高等于整个页面，并给上背景色，以便于效果的展示

     body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background: #000;
          }

风车大盒子

我们通过固定定位结合CSS属性 transform: translate的方式将风车大盒子放到垂直水平居中位置，并且给宽高

  ul {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100px;
            height: 10px;
           
        }

风车小盒子

风车小盒子我们先给一个绝对定位，在上每个元素的宽高，在通过CSS的 border-radius属性让小盒子有一个圆角的效果，在清除无序列表子元素默认的小圆点

   ul>li {
            position: absolute;
            width: 100px;
            height: 10px;
            border-radius: 10px;
            list-style: none;
        }

我们使用CSS选择器给每一个子元素不同的背景色，在使用CSS的transform: rotate属性让其发生旋转，最后通过定位的方式，放到合适的位置

        ul>li:nth-child(1) {
            top: 0;
            left: 0;
            transform: rotate(-90deg);
            background: #e03c3c;
        }

        ul>li:nth-child(2) {
            top: 0;
            left: 60px;
            transform: rotate(-180deg);
            background: #a7ee36;
        }

        ul>li:nth-child(3) {
            top: 60px;
            left: 60px;
            transform: rotate(-270deg);
            background: #256fee;
        }

        ul>li:nth-child(4) {
            top: 60px;
            left: 0;
            transform: rotate(-360deg);
            background: #14e42d;
        }

旋转动画实现

旋转的效果我们使用CSS动画的方式实现，我们先定义一个动画，动画我们是给到无序列表大盒子的，我们之前控制他在页面垂直水平居中显示的时候用到了CSS的transform: translate属性，我们这里拿过来，在让大盒子旋转360度，并且让他无限进行动画执行即可

  ul {
            animation: rotate 3s linear infinite;
        }

        @keyframes rotate {
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }