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

代码语言：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="m 27.849282,62.75 c 0,0 1.286086,-1.279223 1.25,-4.25 -0.03609,-2.970777 -1.606117,-7.675266 -0.625,-12.75 0.981117,-5.074734 4.5,-9.5 4.5,-9.5" /><path class="even" d="m 36.224282,33.625 c 0,0 8.821171,-7.174484 19.3125,-2.8125 10.491329,4.361984 11.870558,14.952665 11.870558,14.952665" /><path class="even" d="m 68.349282,49.75 c 0,0 0.500124,3.82939 0.5625,5.8125 0.06238,1.98311 -0.1875,5.9375 -0.1875,5.9375" /><path class="odd" d="m 31.099282,65.625 c 0,0 1.764703,-4.224042 2,-7.375 0.235297,-3.150958 -1.943873,-9.276886 0.426777,-15.441942 2.370649,-6.165056 8.073223,-7.933058 8.073223,-7.933058" /><path class="odd" d="m 45.849282,33.625 c 0,0 12.805566,-1.968622 17,9.9375 4.194434,11.906122 1.125,24.0625 1.125,24.0625" /><path class="even" d="m 59.099282,70.25 c 0,0 0.870577,-2.956221 1.1875,-4.5625 0.316923,-1.606279 0.5625,-5.0625 0.5625,-5.0625" /><path class="even" d="m 60.901059,56.286612 c 0,0 0.903689,-9.415996 -3.801777,-14.849112 -3.03125,-3.5 -7.329245,-4.723939 -11.867187,-3.8125 -5.523438,1.109375 -7.570313,5.75 -7.570313,5.75" /><path class="even" d="m 34.072577,68.846248 c 0,0 2.274231,-4.165782 2.839205,-9.033748 0.443558,-3.821814 -0.49394,-5.649939 -0.714206,-8.05386 -0.220265,-2.403922 0.21421,-4.63364 0.21421,-4.63364" /><path class="odd" d="m 37.774165,70.831845 c 0,0 2.692139,-6.147592 3.223034,-11.251208 0.530895,-5.103616 -2.18372,-7.95562 -0.153491,-13.647655 2.030229,-5.692035 8.108442,-4.538898 8.108442,-4.538898" /><path class="odd" d="m 54.391174,71.715729 c 0,0 2.359472,-5.427681 2.519068,-.........完整代码请登录后点击上方下载按钮下载查看