模仿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-rule="evenodd" stroke-linecap="round">
<g id="Artboard" transform="translate(-438.000000, -102.000000)" stroke="#979797" stroke-width="3">
<path d="M480.643284,151.284579 C475.23108,151.626868 470.974076,150.608589 467.872272,148.229744 C464.770468,145.850898 463.292395,142.254438 463.438051,137.440365" class="pathType1" id="Path-1"></path>
<path d="M446.36112,108.380701 C450.726056,105.742327 456.418366,104.42314 463.438051,104.42314 C470.457736,104.42314 475.514887,105.742327 478.609504,108.380701" class="pathType2" id="Path-2"></path>
<path d="M439.918388,123.071927 C445.448433,115.050039 453.279464,111.039094 463.41148,111.039094 C473.543496,111.039094 481.374527,115.050039 486.904572,123.071927" class="pathType2" id="Path-3"></path>
<path d="M456.64383,156.632203 C452.694302,151.774532 450.31629,147.294823 449.509794,143.193076 C448.300049,137.040455 449.8911,132.386793 452.721689,129.347965 C455.019807,126.88078 459.765192,124.745728 462.6918,124.745728 C468.117645,124.745728 472.283129,126.419684 474.617171,129.690941 C476.173198,131.87178 477.04408,134.564603 477.2.........完整代码请登录后点击上方下载按钮下载查看