模仿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: absolute;
	left: -5px;
	top: 0px;
}
#Oval {
	stroke-dasharray: 200px;
	stroke-dashoffset: 200;
	opacity: 0;
	transform: rotate(-75deg);
	transform-origin: 30px 30px;
/* 	animation-play-state: paused; */
}
.animate-oval {
	animation: 0.5s circle_animation 0.2s ease-in forwards;
}
@keyframes fingerprint_animation {
	50% {
		stroke-dashoffset: -100;
	}
	60% {
		stroke-opacity: 0;
	}
	100% {
		stroke-dashoffset: -200;
		stroke-opacity: 0;
	}
}

@keyframes fadeout {
	60% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes circle_animation {
	60% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		stroke-dasharray: 400px;
		transform: rotate(40deg);
	}
}

@keyframes check_animation {
	0% {
		stroke-dasharray: 126;
		stroke-dashoffset: 126;
		
	}
	100% {
		stroke-dasharray: 45;
		stroke-dashoffset: 94
	}
}
</style>

</head>
<body translate="no">
<div id="container">
<svg width="51px" height="57px" viewBox="0 0 51 57" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-.........完整代码请登录后点击上方下载按钮下载查看