gsap+svg实现炫酷文字破碎恢复动画效果代码-html代码-BFW代码库

gsap+svg实现炫酷文字破碎恢复动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现炫酷文字破碎恢复动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
body {
      background: #ffffff;
      margin: 0;
      overflow: hidden;
    }

    figure {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      width: 100vw;
    }

    svg {
      padding: 5vw;
      width: 90vw;
    }

    svg > * {
      fill: #1c1c1c;
      stroke: #1c1c1c;
      stroke-width: 0.85px;
    }

    @keyframes tip {
      0%, 100% {
        opacity: 0;
      }
      10%, 80% {
        opacity: 1;
      }
    }
</style>

</head>

<body translate="no">
  <figure>
    <svg x="0px" y="0px" viewBox="0 0 883 105.2" xml:space="preserve" overflow="visible">
      <polygon points="359.9,49.6 359.8,49.7 359.9,49.8 " />
    <polygon points="28,0 10.8,0 28,9 " />
    <polygon points="28,12.6 0,46 0,51.9 28,48.9 " />
    <polygon points="0.8,105 28,105 28,74.7 20.3,69.7 " />
    <polygon points="28,9 10.8,0 0,0 0,46 28,12.6 " />
    <polygon points="0,51.9 0,57.3 20,69.8 20,69.8 20,69.8 28,74.7 28,48.9 " />
    <polygon points="0,57.3 0,105 0.8,105 20.1,69.7 " />
    <polygon points="89.7,40.6 61,25.9 38,46 38,47.8 91,41.9 " />
    <polygon points="89.7,40.6 68.4,19.4 61,25.9 " />
    <polygon points="99,41 126,37.9 126,30.3 99,0 99,0 " />
    <polygon points="38,47.8 38,48.9 103.1,63.5 98.9,49.8 91,41.9 " />
    <polygon.........完整代码请登录后点击上方下载按钮下载查看