效果图
页面结构
我们通过让
#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); } }
代码我放到码上掘金上了，感兴趣的可以看一看！
