css实现人脸扫描识别动画效果代码-html代码-BFW代码库

css实现人脸扫描识别动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现人脸扫描识别动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <style>
        .renlian {
        position: relative;
        height: 200px; width: 200px;
        margin: 400px auto;
        background:url("//repo.bfw.wiki/bfwrepo/image/61a6b445171fa.png") no-repeat;
        background-size: 100% 100%;
    }
    
    .renlian .box {
        width: 30vw;
        height: 30vw;
        max-height: 30vh;
        max-width: 30vh;
        position: relative;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        overflow: hidden;
        border: 0.1rem solid rgba(3, 169, 244, 0.2);
    }
    
    .renlian .line {
        height: calc(100% - 2px);
        width: 100%;
        background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #03a9f4 211%);
        border-bottom: 2px solid #03a9f4;
        transform: translateY(-100%);
        animation: radar-beam 2s infinite;
        animation-timing-function: cubic-bezier(0.3, 0, 0.43, 0.7);
        animation-delay: 1.4s;
    }
    
    .renlian .box:after,
    .renlian .box:before,
    .renlian .bottom:after,
    .renlian .bottom.........完整代码请登录后点击上方下载按钮下载查看