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