svg+vivus实现指纹路径动画效果-html代码-BFW代码库

svg+vivus实现指纹路径动画效果

代码语言：html

所属分类：动画

代码描述：svg+vivus实现指纹路径动画效果

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
html, body {
	font-family: sans-serif;
	width: 100vw;
	height: 100vh;
	margin: 0;
	padding: 0;
	background: hsla(60, 27%, 98%, 1);
}
path {
	stroke-width: 7px;
	stroke: #999;
	fill: none;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
}

svg {
	width: 50vw;
	height: 50vh;
}
.app {
	margin-top: -10%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

input {
	width: 400px;
}

h1 {
		font-weight: 100;
}
</style>




</head>

<body translate="no" >
  <div class="app">

<svg width="100%" height="100%" viewBox="0 0 1416 1600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <use xlink:href="#_Image1" x="0" y="0" width="1416px" height=".........完整代码请登录后点击上方下载按钮下载查看