DrawSVG实现书法写字动画效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Calligraphy animation with GreenSock's DrawSVG plugin and SVG'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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0