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