css+svg实现登录按钮点击指纹识别动画效果代码-html代码-BFW代码库

css+svg实现登录按钮点击指纹识别动画效果代码

代码语言：html

所属分类：动画

代码描述：css+svg实现登录按钮点击指纹识别动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
body {
        align-items:center;
        display:flex;
        font-family:sans-serif;
        font-weight:600;
        font-size:26px;
        height:100vh;
        justify-content:center;
        margin:0
}
.container {
        align-items:center;
        background:#000;
        border-radius:40px;
        box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);
        display:flex;
        height:80px;
        justify-content:center;
        position:relative;
        width:200px
}
.text {
        color:white;
        position:absolute;
        transition:opacity 300ms;
        user-select:none;
        -moz-user-select:none
}
.fingerprint {
        left:-8px;
        opacity:0;
        position:absolute;
        stroke:#777;
        top:-9px;
        transition:opacity 1ms
}
.fingerprint-active {
        stroke:#fff
}
.fingerprint-out {
        opacity:1
}
.odd {
        stroke-dasharray:0 50px;
        stroke-dashoffset:1px;
        transition:stroke-dasharray 1ms
}
.even {
        stroke-dasharray:50px 50px;
        stroke-dashoffset:-41px;
        transition:stroke-dashoffset 1ms
}
.ok {
        opacity:0
}
.active.container {
        animation:6s Container
}
.active .text {
        opacity:0;
        animation:6s Text forwards
}
.active .fingerprint {
        opacity:1;
        transition:opacity 300ms 200ms
}
.active .fingerprint-base .odd {
        stroke-dasharray:50px 50px;
        transition:stroke-dasharray 800ms 100ms
}
.active .fingerprint-base .even {
        stroke-dashoffset:0;
        transition:stroke-dashoffset 800ms
}
.active .fingerprint-active .odd {
        stroke-dasharray:50px 50px;
        transition:stroke-dasharray 2000ms 1500ms
}
.active .fingerprint-active .even {
        stroke-dashoffset:0;
        transition:stroke-dashoffset 2000ms 1300ms
}
.active .fingerprint-out {
        opacity:0;
        transition:opacity 300ms 4100ms
}
.active .ok {
        opacity:1;
        animation:6s Ok forwards
}
@keyframes Container {
        0% {
        width:200px
}
6% {
        width:80p.........完整代码请登录后点击上方下载按钮下载查看