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.........完整代码请登录后点击上方下载按钮下载查看