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>
<mask id="mask6">
<path id="pathmask6" d="M721.22,75c47,54.31,106.6,65.89,122.14,116.45s-8.86,103.17-15.13,155.69c-17,142.39-34.22,285.63-75.54,423-9,30-19.44,60.12-38,85.33S668.21,900.57,637,902.54c-14.84.93-30.84-2.77-40.88-13.73-14-15.28-12-40.27-1-57.85s74.64-25.83,92-37.18C788.53,727.42,840.79,633.7,957,599.31c32.44-9.6,71.2,6.18,101.64-8.58s58.3-38.84,68.35-71.15c6.45-20.74,3.77-46.16-12.92-60.07-9.41-7.85-22-11-34.31-11-36.27.14-68.25,26.71-85.41,58.66S972.09,576,967.22,611.92q-13.82,101.87-27.61,203.73c-5.91,43.65-12,87.9-29.3,128.4-23.3,54.55-65.88,99.14-114.17,133.6-83,59.19-182.52,90.56-282.13,112.06" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:150px" />
</mask>
<mask id="mask7">
<path id="pathmask7" d="M577.69,809.81c31,24,151.28,48,186.9,64.41,28.95,13.33,22.14,16.21,45.8,37.57,74.3,67.09,143.72,139.48,219,205.47,30.65,26.87,74.57,59.3,110.42,78.69,80.93,43.78,151.88,25.71,233,69.09" style="fill:none;stroke:#ffffff;stroke-linecap:round;stroke-miterlimit:10;stroke-width:180px" />
</mask>
</defs>
<path id="path4" mask="url(#mask4)" d="M1155,421.75c-.32-14.31-7.25-24.32-12.93-32.52-9-13-21.25-20.61-45.69-35.77-4.6-2.86-10-6-17.68-7.78-13.93-3.17-26.77.3-26.89,2.42,0,.56.86.92,1.75,3a8.18,8.18,0,0,1,.79,2.73c-.44,3-24.15.1-43.65,2.32-10.4,1.18-20.68,5-41.23,12.58-23.72,8.77-35.58,13.16-40.59,16a44.57,44.57,0,0,1-14.55,5.59c-4.94.93-6,.2-10,.89-8.92,1.53-8.45,6-18.91,10.24-3.53,1.43-2.74.58-22.57,6l-3.51,1a649.65,649.65,0,0,0-98.91,36.44h0l-.73.41-.42.24c-20.09,11.18-47.3,21.31-47.3,21.31-49.44,18.4-67.65,45.65-94.56,48.45-1,.1-3.5.33-4.93,2.17C605.14,527,631.3,572.85,662,573.82c13.11.41,26-7.5,27.61-8.35,9-4.81,10.26-9,22.16-16.65,20.82-13.44,21.89-9.09,30.51-18.34,10.35-11.1,18.78-26.16,24.53-27a36.11,36.11,0,0,0,5.45-1.12c1.59-.44,2.74-.88,2.89-.94,6.85-2.53,69.85,1.14,97.14-19.23l.32-.24c13.54-10.07,27.52-11.67,33.49-12.72,5.7-1,4.09-1.51,36-16.73,34.53-16.47,51.8-24.71,53.51-22.33,3.26,4.52-29.5,33.71-44.53,47.09-25.27,22.52-55.83,46.77-55.12,47.69.3.4,6.27-3.84,7.16-2.82,1.14,1.31-8.13,8.76-6.37,12.88,1.29,3,7.8,2.66,14.23,2.71,10.93.09,18.6,1.39,33.95,4,20.62,3.49,23.17,8.24,34.41,6,8-1.61,17-6.1,16.83-6.73-.08-.26-1.6.37-2-.12-1.34-1.8,14.75-17,33.42-29.69,22.85-15.58,29.84-14.11,32.21-13.41,4.64,1.39,7.64,4.61,14.36,4.57,4.52,0,8.36-1.52,12.89-4,10.51-5.8,16.92-12.68,20.65-16.35,16-15.77,21-10.33,32.18-22.8C1142.54,456.22,1155.46,441.82,1155,421.75ZM662.19,498q3.15-6.1,9.17-6.12C671.56,498.2,667.3,498.86,662.19,498ZM688,490q-2.79-5.82,3.07-7.82Q693.59,492.19,688,490Zm226.59-95.71c2.18-3.06,10-4.2,9.78.83Z" />
<path id="path3" mask="url(#mask3)&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0