页面结构

四色轮有三个旋转轮，我们这里依旧采用无序列表的方式进行实现，无序列表中拥有三个子元素，每一个子元素都代表着一个轮子

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

初始样式

我们先清除body元素的默认内边距外边距，在设置宽高撑满整个屏幕，设置好背景色

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

四色轮大盒子实现

四色轮大盒子实现我们设置好宽高后，用固定定位结合transform: translate属性将其定位到页面垂直水平居中的位置，然后清除大盒子的默认内边距外边距和无序列表的默认样式

        ul {
            width: 400px;
            height: 400px;
            position: fixed;
            top: 50%;
            left: 50%;
            margin: 0;
            padding: 0;
            list-style: none;
          transform: translate(-50%, -50%)
        }

四色轮子实现

轮子我们采用无序列表的子元素实现，我们这里先给子元素一个定位让子元素无论宽高多少全部水平垂直居中在大盒子中心，在给每个子元素设置边框样式，最后使用 border-radius属性将子元素都变为圆形

 ul>li {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%)
             border-radius: 50%;
             border: 50px solid #000;
        }

第一个轮子实现我们用css选择器选择无序列表中的第一个盒子，这个盒子不设置宽高，用边框属性设置好边框的样式，然后再修改每一边的边框颜色

    ul>li:nth-child(1) {
            
            border-right-color: #f69605;
            border-left-color: #1655f5;
            border-top-color: #63f32a;
            border-bottom-color: #909036;
        }

我们在给第二个第三个轮子设置不同的宽高和边框样式，在修改每一边的边框颜色

   ul>li:nth-child(2) {
            width: 100px;
            height: 100px;
            border-right-color: #d3d342;
            border-left-color: #b7b743;
            border-top-color: #aa731f;
            border-bottom-color: #a57731;
        }

        ul>li:nth-child(3) {
            width: 200px;
            height: 200px;
            border-right-color: #9711f0;
            border-left-color: #b6b616;
            border-top-color: #f2119c;
            border-bottom-color: #f21111;
        }

四色轮旋转动画实现

我们声明动画，让无序列表每个子元素都是旋转720度，通过设置不同的时间，实现炫丽的效果

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

在给无序列表的每个子元素设置上动画属性，给上不同的动画执行时间且无限执行动画并可以反转执行动画

      ul>li:nth-child(1) {
            animation: turn 2s linear infinite alternate;
        }

        ul>li:nth-child(2) {
            animation: turn 1.5s linear infinite alternate;
        }

        ul>li:nth-child(3) {
            animation: turn 1s linear infinite alternate;
        }

四色轮等待框实现

页面结构

初始样式

四色轮大盒子实现

四色轮子实现

四色轮旋转动画实现