您的当前位置：首页正文
css雷达扫码效果

来源：步旅网
css雷达扫码效果
HTML代码
	<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>扫描CSS</title>
</head>
<body>
     
     <!--扫描CSS-->
        <ul class="ladar">
            <!-- 四条线 -->
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <!-- 三个内圆 -->
            <li></li>
            <li></li>
            <li></li>
            <!-- 扫描线 -->
            <li></li>
        </ul> 
    <!--扫描CSS-->  
    <style >
        * {
            margin: 0;
            padding: 0;
        }     

        .ladar {
            position: absolute;
            margin-left: 50%;
            margin-top: 31%;
            transform: translate(-50%,-50%);
            width: 7rem;
            height: 7rem;
            background-size: cover;
            border-radius: 100%;
            /*border:20px solid #fff;*/
            box-shadow: 0 0 20px #262626,inset 0 0 80px rgba(53, 182, 237, 1);
            overflow: hidden;
            z-index: -1;
        }
            /* 三个内圆 */
            .ladar li:nth-child(5) {
                position: absolute;
                list-style: none;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 2px solid rgba(53, 182, 237, 1);
            }

            .ladar li:nth-child(6) {
                position: absolute;
                list-style: none;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 2px solid rgba(53, 182, 237, 1);
            }

            .ladar li:nth-child(7) {
                position: absolute;
                list-style: none;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
                width: 100%;
                height: 100%;
                border-radius: 50%;
                border: 2px solid rgba(53, 182, 237, 1);
            }
            /* 扫描线 */
            .ladar li:nth-child(8) {
                list-style: none;
                position: absolute;
                top: 50%;
                left: 50%;
                width: 50%;
                height: 50%;
                /* background: #fff; */
                transform-origin: top left;
                animation: line_r 3s linear infinite;
                background: linear-gradient(45deg,rgba(53, 182, 237, 1) 0%,transparent 50%);
            }

        @keyframes line_r {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

    </style > 
    </body >
 </html >
参考代码：https://codechina.csdn.net/qq_38870145/css_study/-/tree/master/day30
因篇幅问题不能全部显示，请点此查看更多更全内容
查看全文