CSS版的雷达扫描效果_css

CSS代码

body {
background-color: #000;
}

#radar:after {
content: '';
display: block;
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
width: 400px;
height: 400px;
animation: radar-beam 15s infinite;
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0;
}

@keyframes radar-beam {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

HTML代码

<div id="radar"></div>

Done!