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

代码语言：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="1600px" opacity="0.4"/>
    <path d="M820.108,40.334c-31.728,-7.972 -71.622,-6.356 -114.394,0.389" />
    <path d="M1146.1,385.567c-159.047,-359.209 -331.108,-341.331 -642.043,-298.771" />
    <path d="M1245.81,663.949c-12.501,-104.19 -47.092,-172.871 -125.78,-267.815c-43.5,-52.486 -26.047,-69.291 -75.698,-143.171c-87.645,-130.414 -212.144,-171.445 -349.14,-147.04c-105.149,18.731 -197.571,-6.875 -338.849,87.141" />
    <path d="M911.539,156.065c35.937,22.171 72.719,62.435 119.763,79.915" />
    <path d="M283.858,293.774c58.466,-49.922 122.259,-92.469 198.73,-117.463c73.434,-32.936 158.708,-26.838 269.238,-43.84c121.457,10.26 234.103,84.174 333.484,253.917c26.087,43.957 63.865,87.219 92.568,142.902c28.051,74.913 48.52,159.588 62.946,252.045" />
    <path d="M199.127,475.026c7.51,-30.676 19.146,-61.189 39.06,-91.375c72.602,-73.628 161.979,-132.495 260.992,-185.876c40.933,-0.609 84.018,-9.201 135.422,-21.1c164.01,-10.143 317.512,34.879 439.101,247.448c70.287,88.938 118.761,213.522 134.145,387.255c-6.656,83.088 -5.688,158.976 14.876,217.702" />
    <path d="M1237.19,934.481c1.06,-60.092 -8.785,-100.588 -28.785,-122.834" />
    <path d="M177.525,581.792l100.618,-181.296c128.158,-120.363 240.152,-182.438 334.235,-179.924c171.873,-25.072 296.906,25.427 412.427,195.614c15.752,23.206 29.27,78.89 43.521,114.008c18.479,45.536 37.037,72.738 41.449,171.328c1.573,35.145 -1.718,220.528 -24.347,285.884c-17.364,50.151 -71.182,89.764 -124.729,129.507c-183.652,107.172 -305.383,60.005 -420.497,-24.079c-74.689,-36.017 -106.896,-230.645 -77.004,-412.945" />
    <path d="M1076.88,429.586c-9.605,17.965 -5.649,48.895 34.684,114.601c32.823,88.868 56.607,187.217 68.455,298.081c10.048,149.098 -35.426,233.955 33.641,283.841" />
    <path d="M1215.81,1085.21c-7.634,-10.96 -13.644,-24.598 -18.916,-39.452" />
    <path d="M1147.54,659.784c-15.138,18.28 -15.513,79.582 -2.112,158.6c21.502,118.698 -9.952,170.284 3.427,262.533c1.097,35.182 17.03,65.65 58.196,82.757" />
    <path d="M1144.73,814.458c-7.602,3.553 -13.834,13.232 -17.205,26.264c-5.279,59.088 5.867,113.029 -20.033,178.215c-13.189,33.197 -35.442,68.249 -70.663,107.449c-89.682,66.384 -179.498,65.063 -202.505,43.846" />
    <path d="M1059.38,1065.01c-32.642,41.042 -81.674,59.899 -98.506,52.34" />
    <path d="M1037.74,1126.46c26.766,3.866 44.343,-6.953 80.482,-61.336" />
    <path d="M1118.51,1065.49c11.576,39.986 -19.58,86.347 -123.429,130.803c-50.158,26.979 -162.756,23.483 -215.12,17.678c-159.435,-17.674 -241.405,-67.262 -273.062,-150.697" />
    <path d="M1134.46,1146.81c-22.881,-0.122 -39.844,-2.992 -44.656,-6.668" />
    <path d="M1199.37,1202.43c-47.935,-47.569 -135.874,-13.301 -210.891,-2.707" />
    <path d="M1184.55,1224.56c-40.169,-16.718 -108.156,-2.373 -182.303,18.85c-91.539,.........完整代码请登录后点击上方下载按钮下载查看