gsap+svg实现炫酷文字描边动画显示效果代码-html代码-BFW代码库

gsap+svg实现炫酷文字描边动画显示效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现炫酷文字描边动画显示效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        body {
          overflow: hidden;
          height: 100vh;
          display: grid;
          place-items: center;
          background: #000000;
        }
        
        body > svg {
          opacity: 0;
          stroke-width: 1.5px;
          stroke-linejoin: round;
          stroke-linecap: round;
          fill: none;
          width: 90vw;
        }
    </style>


</head>

<body>
    <svg viewBox="-5 -5 88.14 21.58">
  <path d="M4.59,10.49C3.39,7.39,2.19,4.19,1,1v9.5" reversed />
  <path d="M8.19,10.49V1c-1.2,3.2-2.4,6.3-3.6,9.5" />
  <path d="M20.49,4.19v6.4" reversed />
  <path d="M20.49,6c.9-1,1.9-2.1,3.4-1.8,1.1,0,1.4.9,1.6,1.8v4.5" reversed />
  <path d="M25.49,6c.9-1,1.9-2.1,3.4-1.8,1.1,0,1.4.9,1.6,1.8v4.5" reversed />
  <path class="a" d="M16.89,4.19v6.4m0-5.1a3.13,3.13,0,0,0-3.1-1.4,3.34,3.34,0,0,0-2.1,4.5,2.78,2.78,0,0,0,3.1,1.8c.9,0,1.5-.8,2.1-1.4" />
  <path d="M34.09,1v9.5" reversed />
  <path d="M34.09,5.49a3.13,3.13,0,0,1,3.1-1.4,3.34,3.34,0,0,1,2.1,4.5,2.78,2.78,0,0,1-3.1,1.8c-.9,0-1.5-.8-2.1-1.4" />
  <path d="M47.2,9.63a3.27,3.27,0,0,0,.69-3.54,2.92,2.92,0,0,0-3.1-2l-.3.1a3.29,3.29,0,0,0-.87.46" reversed />
  <path d="M43.62,4.65a3.37,3.37,0,0,0-1.13,4,2.78,2.78,0,0,0,3.1,1.8,2.83,2.83,0,0,0,1.61-.86" />
  <path class="l" d="M51.29,1v9.5" reversed />
  <path class="e" id="path283" d="M54.49,6.89h5.4A2.41,2.41,0,0,0,57,4.19a3.2,3.2,0,0,0-2.2,4.5,2.78,2.78,0,0,0,3.1,1.8c.9,0,1.5-.8,2.1-1.4" />
  <path id="path285" d="M67.55,4.91a2.83,2.83,0,0,0-2.36-.82l-.3.1a3.39,3.39,0,0,0-2,4.5A3.45,3.45,0,0,0,63,9" reversed />
  <path id="path285-2" d="M63,9a2.79,2.79,0,0,0,3,1.46,3.24,3.24,0,0,0,2.3-4.........完整代码请登录后点击上方下载按钮下载查看