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

效果图

页面结构

我们通过让#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);
            }
        }

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

坚持努力，无惧未来！