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:80px
}
71% {
        transform:scale(1)
}
75% {
        transform:scale(1.2)
}
77% {
        transform:scale(1)
}
94% {
        width:80px
}
100% {
        width:200px
}
}@keyframes Text {
        0% {
        opacity:1;
        transform:scale(1)
}
6% {
        opacity:0;
        transform:scale(0.5)
}
94% {
        opacity:0;
        transform:scale(0.5)
}
100% {
        opacity:1;
        transform:scale(1)
}
}@keyframes Ok {
        0% {
        opacity:0
}
70% {
        opacity:0;
        transform:scale(0)
}
75% {
        opacity:1;
        transform:scale(1.1)
}
77% {
        opacity:1;
        transform:scale(1)
}
92% {
        opacity:1;
        transform:scale(1)
}
96% {
        opacity:0;
        transform:scale(0.5)
}
100% {
        opacity:0
}
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="container" onclick="this.classList.toggle('active')"><span class="text">Login</span><svg class="fingerprint fingerprint-base" xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><g class="fingerprint-out" fill="none" stroke-width="2" stroke-linecap="round"><path class="odd" d="m 25.117139,57.142857 c 0,0 -1.968558,-7.660465 -0.643619,-13.149003 1.324939,-5.488538 4.659682,-8.994751 4.659682,-8.994751" /><path class="odd" d="m 31.925369,31.477584 c 0,0 2.153609,-2.934998 9.074971,-5.105078 6.921362,-2.17008 11.799844,-0.618718 11.799844,-0.618718" /><path class="odd" d="m 57.131213,26.814448 c 0,0 5.127709,1.731228 9.899495,7.513009 4.771786,5.781781 4.772971,12.109204 4.772971,12.109204" /><path class="odd" d="m 72.334009,50.76769 0.09597,2.298098 -0.09597,2.386485" /><path class="even" d=.........完整代码请登录后点击上方下载按钮下载查看