本文作者:努力搞钱

个人脸识别样式代码

努力搞钱 3周前 ( 03-05 13:39 ) 124 抢沙发

个人脸识别样式代码  第1张


纯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>


文章版权及转载声明

作者:努力搞钱本文地址:http://klyuan.com/post/250.html发布于 3周前 ( 03-05 13:39 )
文章转载或复制请以超链接形式并注明出处努力搞钱网

赞(2

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论

快捷回复:

验证码

评论列表 (暂无评论,124人围观)参与讨论

还没有评论,来说两句吧...