gsap实现svg书法路径绘制遮罩显示图片动画效果代码-html代码-BFW代码库

gsap实现svg书法路径绘制遮罩显示图片动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现svg书法路径绘制遮罩显示图片动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        body {
           font-family: "proxima-nova", sans-serif;
          padding: 0;
          margin: 0;
          display: flex;
          height: 100vh;
          overflow: hidden;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 100%);
        }
        
        svg {
          width: auto;
          height: auto;
          max-width: 800px;
        
        }
        
        #letters path {
          fill: white;
        }
    </style>



</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 800">

  <defs>
    <mask id="m1" maskUnits="userSpaceOnUse">
      <path id="mask1" class="strokeMask part1" d="M418.27,248.91c10.32,15.83,24,40.87,29.05,80.25,5.1,39.91-3.49,70.57-9.8,92.24-13.24,45.46-34.32,75.27-57,106.75C356.46,561.52,330.93,597,284.65,628c-28.61,19.19-63.81,42.8-112.21,41.76-17.71-.38-61.15-1.31-84.61-33.77-22.44-31-11.62-70.23-8.35-82.06,3-10.68,12.15-44,43.94-61.73A79,79,0,0,1,211.29,498" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="108.4" />
      <path id="mask4" class="strokeMask part2" d="M860,95.15c-35.5,19.42-63.66,16.75-140,190.9C713.29,301.29,621,551.8,718,644.4c25.21,24.09,42.09,37.54,81.72,32.15,2.57-.35,63.51-9.65,92.43-63,7.24-13.35,22.81-42,10.72-71-11.28-27-38.18-54.25-90.43-34.16" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="150.04" />
    </mask>
    <mask id="m2" maskUnits="userSpaceOnUse&.........完整代码请登录后点击上方下载按钮下载查看