页面结构

双色球等待框主要是两个小球，所以这里我们采用无序列表的结构进行实现，无序列表中有两个元素，分别代表两个小球

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

初始样式

我们先清除body元素的默认内边距外边距，在让body元素铺满整个屏幕，并且给上背景色

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

双色球等待框的大盒子实现

我们对无序列表大盒子设置样式，清除默认的外边距内边距，在用固定定位结合transform: translate的方式，将元素垂直水平居中在页面中心，设置好宽高，在通过border-radius属性设置为圆形，在设置边框样式，最后清除无序列表子元素的默认样式

   ul {
            margin: 0;
            padding: 0;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border: 1px solid #fff;
            list-style: none;
        }

小球的实现

我们给无序列表子元素设置好样式，利用border-radius属性将其设置为圆形，最后给上定位，在通过CSS元素选择器的方式，控制在父元素中的位置并且给上不同的背景色

  ul li {
            width: 30px;
            height: 30px;
            position: absolute;
            border-radius: 50%;
        }

        ul>li:nth-child(1) {
            top: 0;
            left: 0;
            background: #98b972;
        }

        ul>li:nth-child(2) {
            background: #ad07ee;
            bottom: 0;
            right: 0;
        }

动画实现

等待框是旋转的，所以我们在CSS动画中将无序列表的大盒子设置旋转360度即可，在给无序列表大盒子设置好动画执行时间，让动画进行无限循环即可

     ul {

            animation: animation 1s linear infinite;
        }

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

双色球等待框实现

页面结构

初始样式

双色球等待框的大盒子实现

小球的实现

动画实现