模仿ios指纹识别动画效果-html代码-BFW代码库

模仿ios指纹识别动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title> - Whatsapp Fingerprint Unlock</title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto&amp;display=swap'>
<style>
  body {
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: 'Roboto', sans-serif;
	flex-direction: column;
}
#container {
	position: relative;
	transform: scale(1.25)
}
#container:hover {
	cursor: pointer;
}
#container * {
	position: absolute;
	top: 0;
	left: -25px
}

#Path-1,
#Path-2,
#Path-3,
#Path-4,
#Path-5 {
	stroke-dasharray: 200;
  stroke-dashoffset: 0;
/* 	animation-play-state: paused; */
}
.animate-path {
	animation: 0.8s fingerprint_animation ease-in forwards;
}
.animate-path-delay {
	animation: 0.8s fingerprint_animation ease-in forwards;
	animation-delay: 0.1s
	
}
#text {
	margin-top: 100px;
	transform: scale(1.23);
/* 	animation-play-state: paused; */
}
.animate-text {
	animation: 0.5s fadeout linear forwards;
}
#check {
	animation-delay: 0.3s;
}
.animate-check {
	animation: 0.5s check_animation linear forwards;
}
#checkmark {
	position:.........完整代码请登录后点击上方下载按钮下载查看