<div class="radar-scan">
<div class="radar-container" />
</div>
样式:
.radar-scan {
background-image: linear-gradient(
0deg,
transparent 24%,
rgba(32, 255, 77, 0.15) 25%,
rgba(32, 255, 77, 0.15) 26%,
transparent 27%,
transparent 74%,
rgba(32, 255, 77, 0.15) 75%,
rgba(32, 255, 77, 0.15) 76%,
transparent 77%,
transparent
),
linear-gradient(
90deg,
transparent 24%,
rgba(32, 255, 77, 0.15) 25%,
rgba(32, 255, 77, 0.15) 26%,
transparent 27%,
transparent 74%,
rgba(32, 255, 77, 0.15) 75%,
rgba(32, 255, 77, 0.15) 76%,
transparent 77%,
transparent
);
background-size: 2rem 2rem;
width: 200px;
height: 200px;
position: relative;
padding: 0;
margin: 0;
font-size: 1.6rem;
}
.radar-container {
// background: radial-gradient(
// center,
// rgba(32, 255, 77, 0.3) 0%,
// rgba(32, 255, 77, 0) 75%
// ),
// repeating-radial-gradient(
// rgba(32, 255, 77, 0) 5.8%,
// rgba(32, 255, 77, 0) 18%,
// #20ff4d 18.6%,
// rgba(32, 255, 77, 0) 18.9%
// ),
// linear-gradient(
// 90deg,
// rgba(32, 255, 77, 0) 49.5%,
// #20ff4d 50%,
// #20ff4d 50%,
// rgba(32, 255, 77, 0) 50.2%
// ),
// linear-gradient(
// 0deg,
// rgba(32, 255, 77, 0) 49.5%,
// #20ff4d 50%,
// #20ff4d 50%,
// rgba(32, 255, 77, 0) 50.2%
// );
background:
-webkit-radial-gradient(
center,
rgba(32, 255, 77, 0.3) 0%,
rgba(32, 255, 77, 0) 75%
),
// 调整蜘蛛网盘线数
-webkit-repeating-radial-gradient(
rgba(32, 255, 77, 0) 5.8%,
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%
);
width: 200px;
height: 200px;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 0.2rem solid #0cdd36;
overflow: hidden;
}
.radar-container:before {
content: " ";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
animation: scanSpot 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s;
}
.radar-container:after {
content: " ";
display: block;
background-image: linear-gradient(
44deg,
rgba(0, 255, 51, 0) 50%,
#00bb22 100%
);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: scan 5s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}
@keyframes scan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes scanSpot {
14% {
background: radial-gradient(
2vmin circle at 75% 70%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
);
}
14.0002% {
background: radial-gradient(
2vmin circle at 75% 70%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 63% 72%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
);
}
25% {
background: radial-gradient(
2vmin circle at 75% 70%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 63% 72%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 56% 86%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
);
}
26% {
background: radial-gradient(
2vmin circle at 75% 70%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 63% 72%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 56% 86%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
);
opacity: 1;
}
100% {
background: radial-gradient(
2vmin circle at 75% 70%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 63% 72%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
),
radial-gradient(
2vmin circle at 56% 86%,
#ffffff 10%,
#20ff4d 30%,
rgba(255, 255, 255, 0) 100%
);
opacity: 0;
}
}