正文

144734agg3p6sipc9ggcy6.gif

纯CSS。 复制下方代码 修改下图片路径即可

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人脸扫码效果</title>
    <style>
        img {
            position: absolute;
            /* display: none; */
        }

        div {
            width: 360px;
            height: 200px;
            position: absolute;
            background:
                linear-gradient(#03a9f4, #03a9f4),
                linear-gradient(90deg, #ffffff33 1px, transparent 0, transparent 19px),
                linear-gradient(#ffffff33 1px, transparent 0, transparent 19px),
                linear-gradient(transparent, #2196f3);
            background-size: 100% 1.5%, 10% 100%,100% 10%, 100% 100%;
            background-repeat: no-repeat, repeat, repeat, repeat;
            background-position: 0 0, 0 0, 0 0, 0 0;
            clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);
            animation: move 1.5s linear infinite;
        }

        @keyframes move {
            to {
                background-position: 0 100%, 0 0, 0 0, 0 0;
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
            }
        }
    </style>
</head>

<body>
    <img src="ns.jpg" alt="人脸" height="200"   >
    <div></div>
</body>

</html>


文章版权声明:除非注明,否则均为枫叶博客原创文章,转载或复制请以超链接形式并注明出处。
-- 展开阅读全文 --