分享一个人脸识别的样式代码

左岸 · 发表于 2022-5-21 22:15:19

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

<!DOCTYPE html>

<html lang="en">

<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>
复制代码
不定时更新关于本人对前端知识的有趣小demo

相关帖子