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

gsap+svg+DrawSVGPlugin实现文字彩色描边显示动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg+DrawSVGPlugin实现文字彩色描边显示动画效果代码，使用了GSDevTools3来进行动画进度控制。

下面为部分代码预览，完整代码请点击下载或在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;
  min-height: 100vh;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(
      346deg,
      rgba(55, 55, 55, 0.04) 0%,
      rgba(55, 55, 55, 0.04) 22%,
      rgba(140, 140, 140, 0.04) 22%,
      rgba(140, 140, 140, 0.04) 69%,
      rgba(225, 225, 225, 0.04) 69%,
      rgba(225, 225, 225, 0.04) 100%
    ),
    linear-gradient(
      31deg,
      rgba(55, 55, 55, 0.04) 0%,
      rgba(55, 55, 55, 0.04) 42%,
      rgba(140, 140, 140, 0.04) 42%,
      rgba(140, 140, 140, 0.04) 85%,
      rgba(225, 225, 225, 0.04) 85%,
      rgba(225, 225, 225, 0.04) 100%
    ),
    linear-gradient(
      55deg,
      rgba(55, 55, 55, 0.04) 0%,
      rgba(55, 55, 55, 0.04) 13%,
      rgba(140, 140, 140, 0.04) 13%,
      rgba(140, 140, 140, 0.04) 72%,
      rgba(225, 225, 225, 0.04) 72%,
      rgba(225, 225, 225, 0.04) 100%
    ),
    linear-gradient(90deg, rgb(0, 0, 0), rgb(0, 0, 0));
}

#demo path {
  stroke-miterlimit: 10;
  fill: none;
  stroke: #967bb6;
  stroke: #42a6e0;
  stroke-linecap: round;
  stroke-width: 12px;
  stroke-linejoin: round;
}

#demo {
  max-width: 96vw;
  max-height: 90vh;
  height: auto;
  width: auto;
  overflow: visible;
  opacity: 0;
  margin-bottom: 10vh;
}

text {
  opacity:0;
}
</style>



</head>

<body >
  <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="2400" height="600" viewBox="0 0 1200 300">
  <g>
    <path d="M148.08,107.52c-11.07-3.79-26.72-5.93-40.44-6.87-38-2.63-66.91,28.68-66.17,66.82,.71,36.75,30.03,65.49,67.06,65.49,14.04,0,29.54-1.82,40.96-7.52" />
  </g>
  <g>
    <path d="M190.97,100.65V232.96" />
    <path d="M293.92,100.65V232.96" />
    <path d="M191.14,162.66h101.08" />
  </g>
  <g>
    <path d="M332.75,232.65l53.03-130.9c.51-1.24,2.27-1.24,2.77,0l52.15,130.89" />
    <path d="M353.66,182.94h66.49" />
  </g>
  <g>

    <path d="M480.09,97.87V229.77c0,1.56,1.26,2.82,2.82,2.82h63.08" />
  </g>
  <g>
    <path d="M580.78,97.87V229.77c0,1.56,1.26,2.82,2.82,2.82h63.08" />
  </g>
  <g>
    <path d="M740.56,102.02h-57.79V232.52h57.79" />
    <path d="M683.9,161.7h49.29" />
  </g>
  <g>
    <path d="M782.94,233.52V102.76c0-.83,1.05-1.2,1.57-.55l106.87,129.57c.53,.66,1.59,.29,1.5.........完整代码请登录后点击上方下载按钮下载查看