DrawSVG实现书法写字动画效果-html代码-BFW代码库

DrawSVG实现书法写字动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Calligraphy animation with GreenSock&#39;s DrawSVG plugin and SVG&#39;s mask</title>
<style>
      html{
  height:100%;
  width:100%;
  margin:0;
  overflow:hidden;
  background:url('http://repo.bfw.wiki/bfwrepo/image/bg_paper.jpg');
  background-size:cover;
}
svg{
  max-height:100%;
  max-width:100%;
  position: fixed;
  left:0;
  top:0;
  opacity:0;
}
path{
  fill:#000000;
}
#twitterbtn{
  position:fixed;
  bottom:80px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
#replaybtn{
  position:fixed;
  bottom:10px;
  right:10px;
  width:10%;
  max-width:50px;
  min-width:50px;
  opacity:0;
  cursor:pointer;
}
    </style>
</head>
<body translate="no">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1462.84 1540.42">
<defs>
<mask id="mask1">
<path id="pathmask1" d="M206.47,316.52C230.69,329.31,309,370,335,378.47c30.86,10.1,27.06-1.63,46.79,24.16" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px" />
</mask>
<mask id="mask2">
<path id="pathmask2" d="M60,708.2C84.22,721,171.78,744.3,197.82,752.81c30.86,10.1,27.06-1.63,46.79,24.17" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:120px" />
</mask>
<mask id="mask3">
<path id="pathmask3" d="M219.63,1450.42c13.34-22.8,57.07-188.89,67.86-213,8.38-18.75,19.68-36.05,28.4-54.64,9.93-21.16,16.4-43.74,22.82-66.2l36.89-129c7.84-27.37,15.72-55.1,16.5-83.57" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
<mask id="mask4">
<path id="pathmask4" d="M520.8,586.42C585.47,542.88,747,469.84,817,435.51c16.18-7.94,73.6-53.32,89.72-61.39,72-36,82.39-42.53,162.57-49.7,12.65-1.13,58.52,30.34,67,39.83,5.62,6.3-37.13,100.22-36.21,108.62,1.65,15-114.23,53.28-119.39,67.47" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
<mask id="mask5">
<path id="pathmask5" d="M611.26,418.56c-8.19,43.35,11.14,224,9.73,268.05-1,30-19.93,61.69-27,90.86L539.15,1003c-9.32,38.36-18.68,76.84-32.75,113.73-10.1,26.49-22.57,52-35,77.47-13.76,28.15-37.09,87.58-50.85,115.72" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:135px" />
</mask>
<mas.........完整代码请登录后点击上方下载按钮下载查看