<!doctype html><html><head>
<style>
/* 父容器，撑满整个页面 */
.box {
background:
-webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 100%),
-webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 1.5%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%),
-webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%),
-webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
position: absolute;
top: 0;
left: 0;
height: 500px;
width: 500px;
border-radius:500px;
overflow:hidden
}
/* 子容器，这个会一直旋转，并对雷达效果的div元素的超出部分作出隐藏功能 */
.cover {
position: relative;
left: -100%;
top: -100%;
width: 150%;
height: 150%;
overflow: hidden;
transform-origin: 100% 100%;
/* 3s是雷达效果旋转一圈的时间 */
animation: rotation 3s linear infinite;
}
/* 雷达效果，是一个div，利用渐变，生成雷达的从深到淡的效果，然后利用父元素遮住部分，从而来实现雷达效果 */
.sector {
position: absolute;
bottom: 0;
right: 0;
transform: rotate(15deg);
transform-origin: 100% 100%;
background-color: black;
width: 100%;
height: 80%;
background: linear-gradient(185deg, rgba(80, 130, 255, 1) 40%, rgba(255, 255, 255, 0) 90%);
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="cover">
<div class="sector"></div>
</div>
</div>
</body>
</html>
