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,20.237 -183.362,16.587 -275.368,-2.352c-152.821,-13.76 -251.451,-107.461 -293.164,-285.124c-27.267,-168.914 -12.42,-272.242 27.827,-336.016c50.288,-156.608 120.598,-213.816 204.903,-201.555c157.467,4.603 235.942,123.639 150.558,369.635c-17.589,50.677 -86.7,77.084 -120.837,75.357c-97.765,-4.943 -106.961,-258.159 -58.42,-338.925c27.381,-45.56 111.628,-35.571 130.091,17.917c22.962,66.525 23.325,132.258 -13.105,222.268c-8.097,28.188 -23.999,51.725 -52.48,67.763c-39.051,5.213 -53.029,-51.743 -58.834,-132.184c-9.966,-111.026 9.433,-169.964 53.088,-169.799c54.916,0.208 60.909,86.24 18.356,252.982" />
    <path d="M537.963,932.061c-23.887,48.916 38.341,136.747 158.971,153.333c87.765,7.665 169.804,-11.955 244.6,-66.097c43.777,-27.852 90.214,-92.157 134.246,-210.292" />
    <path d="M333.382,388.442c-47.55,65.908 -109.927,188.009 -173.368,292.8" />
    <path d="M157.321,773.447c30.476,-66.529 68.434,-140.451 106.472,-206.791c35.944,-62.689 70.351,-127.275 117.962,-187.812c66.292,-84.29 152.58,-125.056 258.48,-123.135c149.718,5.765 263.81,49.927 321.08,155.328c14.54,40.797 26.506,84.378 32.75,134.149c10.497,64.137 16.927,134.759 11.426,224.401c-12.684,147.875 -97.262,254.29 -276.456,255.467c-126.284,-13.214 -189.836,-108.594 -210.575,-251.61c5.275,-157.644 30.971,-232.688 76.048,-258.19c50.276,-51.06 101.08,-75.314 162.173,-34.429c84.159,66.739 85.33,213.465 -0.65,341.791" />
    <path d="M660.587,285.889c-62.211,-4.134 -132.457,17.225 -189.402,54.682c-85.438,56.198 -209.666,291.936 -241.444,367.666c-8.819,21.019 -71.573,136.859 -81.226,166.643" />
    <path d="M953.346,478.596c-63.771,-125.511 -163.802,-190.756 -321.06,-160.878c-92.068,13.437 -167.823,65.18 -230.452,147.743c-11.303,30.638 -31.166,55.335 -60,73.806c-25.999,55.267 -46.844,113.397 -65.224,172.896c-14.396,58.014 -32.186,116.208 -49.852,174.394c-25.453,39.628 -51.094,110.218 -65.621,166.964" />
    <path d="M171.041,1124.17c-6.211,-16.138 -2.369,-31.509 4.288,-48.575" />
    <path d="M190.554,1211.69c4.418,-57.263 14.721,-126.082 18.495,-199.536c15.661,-76.737 12.318,-101.273 17.823,-125.35.........完整代码请登录后点击上方下载按钮下载查看