我正在参加「码上挑战赛」概况请看：码上挑战赛来了！

作用图

页面结构

咱们经过让#app盒子占满全屏，在里边声明一个类名为radar的盒子，这个是用来承载雷达款式的盒子，里边有两个无序列表，分别代表了雷达的方向标识和雷达的规模标识，在声明一个类名为scanning盒子，用于完成扫描的作用

    <div id="app">
        <div class="radar">
            <!-- 雷达线 -->
            <ul class="radar_line">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 雷达圈规模 -->
            <ul class="radar_circle">
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!-- 雷达扫描 -->
            <div class="scanning"></div>
        </div>
    </div>

初始款式

咱们将所有元素的内外边距清空，清空之后在运用#app盒子铺满全屏且背景色设置为黑色，结合flex布局让里边的内容垂直水平居中

 * {
          margin: 0;
            padding: 0;
            list-style: none;
        }
        #app {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
        }

雷达款式完成

咱们给.radar盒子设置巨细，经过css属性设置成圆形，边框设置为白色，在让溢出的内容躲藏起来

        /* 雷达大盒子 */
        .radar {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 10px solid #fff;
            background: #000;
            overflow: hidden;
        }

雷达方向标识完成

雷达方向标识咱们这儿采用无序列表进行完成，给无序列表中的子元素设置好宽高和背景色，在经过定位结合css旋转属性，完成出方向分割的作用

  /* 雷达线 */
        .radar_line li {
            position: absolute;
            top: 0;
            left: 50%;
            background: #00ff00;
            width: 1px;
            height: 100%;
        }
        .radar_line>li:nth-child(1) {
            transform: rotate(45deg);
        }
        .radar_line>li:nth-child(2) {
            transform: rotate(90deg);
        }
        .radar_line>li:nth-child(3) {
            transform: rotate(135deg);
        }

雷达规模标识完成

雷达规模标识咱们这儿也是用无序列表进行完成，经过定位让子盒子全部都水平垂直居中显现，然后再设置每一个子盒子不同的巨细，完成出扫描规模的作用

    /* 雷达圈 */
        .radar_circle li {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #00ff00;
            border-radius: 50%;
        }
        .radar_circle>li:nth-child(1) {
            width: 100px;
            height: 100px;
        }
        .radar_circle>li:nth-child(2) {
            width: 200px;
            height: 200px;
        }
        .radar_circle>li:nth-child(3) {
            width: 300px;
            height: 300px;
        }

雷达扫描作用完成

雷达扫描作用咱们经过.scanning盒子完成，宽度高度是整个雷达盒子的一半，经过定位，定位到距离头部50%，左边50%,这样该盒子的左上角就在雷达盒子的正中心了，咱们运用css设置旋转中心点，设置到左上角，在运用背景属性完成突变，最后经过css动画让他进行旋转，这样扫描的作用就完成了！

  /* 扫描 */
        .scanning {
            position: absolute;
            top: 50%;
            left: 50%;
            width:200px;
            height: 200px;
            background: linear-gradient(45deg, #00ff00 0%, transparent 50%);
            animation: investigation  2s infinite linear;
            transform-origin: left top;
        }
 @keyframes investigation  {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

代码我放到码上上了，感兴趣的可以看一看！

坚持尽力，无惧未来！