CSS版的雷达扫描效果_html

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!