页面结构

七彩圆点等待框结构比较简单，由于是拥有多个圆点，我们这里采用无序列表的方式进行实现

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

初始样式

我们内容是放在body元素中，所以清除默认的外边距和内边距，再给一个背景色即可

     body {
            margin: 0;
            padding: 0;
            background: #000;
        }

圆点实现

圆点我们是使用无序列表中的子元素实现，所以我们先使用定位结合CSStransform: translate属性让无序列表大盒子水平垂直居中在页面的正中心，然后清除无序列表子元素的默认小圆点，在利用flex布局的方式让圆点都一行排列

      ul {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            list-style: none;
        }

我们给无序列表的子元素设置好宽高并且通过左外边距，让他距离左元素有一定的距离，使用CSS的border-radius属性变为圆形，在给上一个默认的背景色

    ul li {
            width: 20px;
            height:20px;
            margin-left: 5px;
            border-radius: 50%;
            background: #622de9;
        }

圆点跳动动画

我们先声明一个CSS动画，然后在动画执行进度中对元素的垂直位置进行改变以及对背景颜色进行改变，这样可以让变得好看

  @keyframes beat {
            0% {
                transform: translateY(0px);
                background: #4805f1;
            }

           50% {
                transform: translateY(-20px);
                background: #f70707;
            }

            100% {
                transform: translateY(0px);
                background: #4805f1;
            }
        }

最后我们通过选择器给无序列表的每个子元素添加上动画，并对每个无序列表的子元素动画执行时间进行微调以及修改其背景色，这样就可以实现了

       ul li {
            width: 20px;
            height:20px;
            margin-left: 5px;
            border-radius: 50%;
            animation: beat 1s linear infinite;
        }

        ul li:nth-child(1) {
            background: #622de9;
            animation-delay: 0s;
        }

        ul li:nth-child(2) {
            background: #e71fd3;
            animation-delay: 0.1s;
        }

        ul li:nth-child(3) {
            background: #4e40e7;
            animation-delay: 0.2s;
        }

        ul li:nth-child(4) {
            background: #34bbec;
            animation-delay: 0.3s;
        }

        ul li:nth-child(5) {
            background: #8db61c;
            animation-delay: 0.4s;
        }

        ul li:nth-child(6) {
            background: #95e935;
            animation-delay: 0.5s;
        }
        ul li:nth-child(6) {
            background: #1ffdb7;
            animation-delay: 0.6s;
        }

代码已放码上掘金！

七彩圆点等待框的实现

页面结构

初始样式

圆点实现

圆点跳动动画