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".........完整代码请登录后点击上方下载按钮下载查看