css人脸识别的圆圈,一个人脸识别的样式纯CSS代码

一个人脸识别的样式纯纯CSS， 复制下方代码 修改下图片路径即可











人脸扫码效果





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%);



}



}















复制代码不定时更新 关于本人对前端知识的 有趣小demo