gsap+svg实现手写签名动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现手写签名动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
	width: 100%;
	height: 100vh;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
}
svg {
	width: 60%;
	min-width: 150px;
	max-width: 400px;
}
</style>



</head>

<body  >
  <svg viewBox="0 0 3412 1391" >
 <defs>
     <clipPath id="mariane-letter-M-clip">
         <path d="M832 402c0,2 1,3 3,3 -1,1 -1,3 -2,4 0,2 -2,2 -4,1 0,2 1,3 3,4 1,0 1,1 0,3 -4,0 -6,2 -6,6 -1,3 -1,6 0,9l-4 0c1,1 1,3 1,4 0,2 1,2 3,1 0,1 -2,1 -6,1 -2,3 -1,5 1,4 3,0 4,0 5,2 0,3 -1,5 -4,4 -3,0 -5,1 -5,4 1,1 3,1 6,1 -2,2 -3,5 -3,9 -1,3 -3,5 -6,6 1,3 2,6 3,8 1,2 1,5 0,10 -2,-1 -2,-2 -2,-4 1,-2 0,-3 -2,-3 -2,1 -3,4 -2,10 1,6 0,10 -4,11 -1,3 -1,4 1,4 2,0 4,1 5,3 -6,5 -8,11 -7,17 2,6 -1,11 -7,16 0,3 1,4 2,3 1,-2 2,-1 4,0 -2,6 -3,10 -3,13 0,4 -1,9 -3,15 -3,0 -4,0 -3,2 0,1 -2,1 -6,-1 7,5 9,11 5,17 -4,7 -6,13 -6,19 -2,-2 -3,-2 -3,1 0,2 -2,3 -6,1 1,-5 1,-11 0,-18 -2,2 -3,3 -2,5 0,1 -2,2 -7,2 5,3 7,6 7,10 0,3 3,7 8,10 -2,3 -5,4 -9,4 0,-2 1,-3 2,-4 2,0 2,-1 1,-3 -7,1 -10,4 -8,11 1,6 0,12 -3,17 4,-1 6,-3 6,-5 0,-3 0,-5 0,-8 2,-2 4,-3 5,-2 1,1 1,0 1,-4 3,2 4,4 3,8 -2,3 -3,6 -4,8 5,4 6,11 4,20 -2,10 -5,18 -9,25 1,1 2,2 2,4 0,1 1,3 3,4 -5,8 -7,18 -7,30 1,12 -3,21 -11,28 -2,2 -3,4 -3,5 2,0 3,-2 3,-5l4 0c3,3 4,7 1,10 -2,4 -2,8 1,13 -5,1 -7,3 -6,5 1,3 2,5 4,7 -5,-1 -8,0 -8,2 -1,3 -3,4 -7,4 0,2 1,3 3,2 2,0 3,0 3,2 2,0 3,-1 3,-4 2,2 3,6 3,13 -1,7 -4,12 -9,15 1,1 2,2 3,1 1,0 3,0 5,2 -4,2 -5,6 -4,12 2,5 -1,9 -7,11 3,8 5,16 5,23 0,8 -3,15 -8,22 4,3 6,9 5,18 -3,0 -5,-1 -5,-3 -1,3 0,6 2,8 2,2 0,2 -5,1 0,2 1,3 2,4 2,0 3,2 4,4 -6,4 -7,11 -3,22 -2,-2 -3,-3 -4,-2 -1,0 -3,1 -5,2 -1,2 -1,3 1,3 1,0 3,1 4,2 0,2 0,3 2,3 1,0 3,-1 4,-3 2,2 1,4 -2,8 -3,3 -2,6 3,8 0,2 -1,3 -4,3 -2,0 -4,1 -5,3 1,4 4,6 8,6 -1,4 -3,6 -6,6 -3,0 -6,1 -8,3 4,1 6,3 7,5 0,3 1,6 2,9 -2,2 -3,6 -3,13 2,0 3,0 3,-2 0,-1 1,-2 3,-1l0 11 -6 0 0 40c-4,-2 -6,-1 -7,1 -1,3 -4,4 -8,4 0,3 2,4 6,3 4,-1 7,-3 8,-5 3,9 4,17 3,24 0,6 0,14 1,24 0,2 1,3 3,3 2,-1 4,0 5,2 -2,6 -4,13 -6,21 -1,8 1,13 6,16 0,8 0,18 2,28 2,10 3,22 5,36 2,2 3,2 4,1 1,-1 2,0 4,2 0,2 -2,3 -6,3 3,4 4,9 4,15 0,7 3,11 9,13 1,16 5,30 12,41 7,12 14,25 21,39 -5,0 -6,1 -3,3 3,2 4,4 3,6 -1,-2 -2,-3 -3,-2 -2,0 -2,2 -1,5 -2,-1 -4,-2 -5,-2 -2,0 -3,0 -4,-1l0 -5c-2,0 -3,1 -3,3 0,1 1,2 3,2 -3,2 -5,2 -6,0 -1,-2 -4,-2 -8,0 -2,-5 -4,-9 -6,-12 -3,-3 -5,-7 -6,-12 -5,0 -9,-1 -11,-3 -3,-2 -5,-4 -8,-6 -1,-2 -1,-4 0,-4 1,-1 1,-2 1,-4 -7,-17 -15,-33 -25,-48 -9,-15 -16,-32 -20,-51 -1,-2 -1,-5 0,-8 1,-4 1,-7 0,-10 -1,-2 -2,-3 -3,-2 -1,0 -2,0 -3,-2 -5,-12 -8,-26 -10,-44 -1,-18 -2,-33 -2,-44 0,-13 -1,-25 -4,-38 -3,-12 -5,-25 -5,-37 0,-19 1,-38 3,-58 2,-19 2,-37 0,-54 0,-6 1,-13 3,-19 2,-7 4,-13 5,-19 1,-8 0,-16 -1,-23 -2,-8 -1,-15 1,-22 1,-2 2,-3 3,-4 1,0 2,-2 3,-4 -1,-1 -2,-1 -3,-1 -1,0 -2,-1 -2,-2 1,-7 2,-14 4,-21 1,-8 3,-16 4,-24 1,-6 1,-11 0,-17 -1,-5 0,-11 4,-16 0,-3 -1,-4 -3,-4 -2,0 -2,-2 -1,-5 8,-17 11,-35 11,-55 -1,-20 4,-40 13,-60 0,-2 -1,-4 -2,-4 -1,-1 -1,-2 0,-5 7,-39 15,-79 23,-118 8,-40 16,-77 24,-112 11,-47 22,-91 33,-132 11,-40 20,-85 28,-134 -5,1 -7,4 -7,8 0,5 -3,6 -9,5l0 9c-1,0 -2,0 -2,0 -1,-1 -2,-1 -3,-1 -13,17 -23,34 -32,50 -8,17 -20,32 -35,46 -1,3 -1,5 0,5 1,1 1,2 1,4 -5,2 -9,5 -11,10 -3,4 -5,9 -7,14 -2,5 -4,10 -7,15 -2,5 -6,9 -11,11l0 16c-5,5 -9,11 -13,17 -4,6 -6,12 -6,19 -2,-1 -3,-2 -3,-4 0,-1 -1,-2 -3,-2 0,5 -1,8 -3,10 -1,1 -4,3 -8,5 5,1 7,3 5,5 -2,2 -4,4 -6,6 0,1 1,1 4,1 -11,20 -20,40 -28,60 -8,19 -16,38 -23,57 -4,0 -6,1 -7,2 -3,18 -9,31 -17,40 2,6 1,14 -2,23 -4,9 -8,14 -13,15l0 12c-1,0 -2,0 -2,-1 0,0 0,0 -1,0 -2,10 -5,22 -8,36 -4,14 -10,23 -19,28 0,1 0,2 1,2 1,1 2,0 2,-2 0,9 -2,19 -7,29 -4,10 -8,18 -11,24 2,11 0,22 -6,32 -6,11 -11,21 -15,32 -5,13 -10,26 -14,39 -5,13 -10,27 -15,41 -8,21 -17,41 -27,61 -10,19 -27,33 -51,40 -3,1 -5,0 -5,-1 -1,-2 -2,-2 -4,-2 -2,0 -4,1 -7,4 -11,-3 -20,-9 -25,-17 -6,-9 -11,-17 -16,-25 -2,0 -3,1 -3,2 0,2 -1,2 -3,1 -10,-17 -19,-35 -28,-54 -8,-19 -11,-40 -9,-63 -7,-76 -4,-151 9,-226 0,-3 -1,-5 -3,-7 8,-24 13,-52 15,-83 2,-31 7,-57 16,-79 -2,-10 -2,-21 1,-33 2,-11 6,-21 10,-30 -1,-20 1,-40 6,-60 5,-19 7,-43 6,-71 -4,5 -8,10 -12,16 -3,5 -5,12 -6,20 -5,3 -9,7 -11,12 -2,5 -4,10 -5,15 -2,5 -4,10 -6,15 -3,5 -6,9 -10,12 -8,26 -19,54 -32,84 -13,30 -23,61 -31,93 -8,20 -16,43 -23,67 -8,25 -15,50 -22,75 -7,26 -14,51 -20,75 -6,25 -11,47 -15,67 0,1 -1,2 -4,2 -10,66 -22,127 -36,184 -14,56 -24,115 -29,175 -3,10 -5,20 -7,29 -2,10 -2,18 0,26 -2,2 -4,5 -5,8 -1,3 -3,4 -6,4 1,7 1,13 -1,16 -2,3 -4,6 -6,9 -7,0 -12,-1 -15,-1 -2,-1 -6,0 -12,1 -14,-8 -24,-19 -30,-33 -5,-13 -7,-29 -5,-46 3,-21 7,-44 12,-69 5,-25 9,-47 12,-66 5,-32 12,-67 21,-104 9,-38 16,-73 21,-105 8,-27 16,-54 24,-81 8,-27 15,-55 20,-84 12,-32 22,-64 29,-96 8,-32 18,-63 32,-92 0,-3 0,-5 -1,-6 -1,-1 -1,-3 0,-6 6,-10 9,-20 10,-30 1,-10 6,-18 15,-24 2,-20 7,-38 15,-55 8,-16 16,-35 24,-56 2,-2 4,-2 4,0 1,2 2,3 5,3 0,-2 0,-4 -1,-6 -1,-2 -2,-4 -2,-6 3,-12 8,-21 14,-26 6,-6 10,-16 13,-30 1,-1 3,-1 4,-1 2,0 3,-1 6,-2 -3,-8 0,-14 7,-18 7,-4 12,-9 14,-16 0,-2 -1,-2 -3,0 5,-17 14,-29 28,-35 14,-6 30,-6 47,-1l0 7c7,1 11,2 14,3 2,1 7,1 14,-1 1,5 3,10 7,14 3,5 3,9 -1,14 0,2 0,3 1,2 0,-1 2,-2 4,-2 -2,4 -3,8 -2,12 1,3 2,7 2,12 3,-2 4,-3 3,-4 -1,-1 -1,-3 0,-6 1,0 2,3 4,10 -1,0 -2,1 -2,1 -1,1 -1,1 -2,1 2,1 3,2 3,4 0,1 1,3 3,5 0,2 -1,3 -3,3 -1,-1 -2,-1 -3,-1 0,1 1,1 3,1 2,11 2,24 1,40 -1,16 -5,28 -13,35 0,2 1,3 5,2 3,-1 6,-1 7,1 -2,3 -4,6 -5,8 -1,2 0,4 3,7 -8,1 -12,5 -11,11 0,6 -1,11 -4,16 3,.........完整代码请登录后点击上方下载按钮下载查看