TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码-html代码-BFW代码库

TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+MorphSVGPlugin+DrawSVGPlugin+svg实现小球弹跳线条文字显示动画效果代码，点击开始按钮，红色小球下落，画出一道弧线，起伏向前，文字显示出来。

代码标签： TweenMax MorphSVGPlugin DrawSVGPlugin svg 小球弹跳线条

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <style>
      * {
  margin: 0;
  padding: 0;
}

#wrapper {
  overflow: hidden;
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: rgb(32, 32, 32);
}

/* === SVG === */
svg {
  display: block;
  width: 100%;
  height: 100vh;
}

svg #startText,
svg #restartText {
  fill: #ffffff;
  pointer-events: none;
}

svg #ball {
  pointer-events: none;
}

svg #text,
svg #com {
  fill:transparent;
}

svg #paths  {
  fill:none;
  stroke: rgb(80, 80, 80);
  stroke-width: 2px;
  stroke-linejoin:round;
  stroke-dasharray:10;
  stroke:gray;
  opacity: 0;  
}

svg #startClick {
  opacity: 0;
  cursor: pointer;
}

svg #startClick:hover + #startText,
svg #restartClick:hover + #restartText {
  stroke: rgba(255,65,65,0.3);
  stroke-width: 4px;
}

svg #restartClick {
  cursor: pointer;
  fill:transparent;
}

svg #restartText {
  opacity:0;
}
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="wrapper" ontouchstart="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1378 564" preserveAspectRatio="xMidYMid meet">
    <defs>
      <!-- I use mask to make dashed line (DrawSVG plugin won’t draw a dashed path)  -->
      <g stroke-width="3px" stroke="#fff">
          <mask id="mask1">
              <path id="path1_m" d="M196.5,79l3,321.5s188-246,473,7" />
          </mask>
          <mask id="mask2">
              <path id="path2_m"
                  d="M672.5,407.5s-141.2-111.8-261.8-10c-.2.2-.5-.1-.4-.3,36.5-57.4,205.9-744.5,542.2,2.3" />
          </mask>
          <mask id="mask2_1">
              <path id="path2_1_m" d="M952,399.2c1.7-503.1,103.2-502.7,101.5.3" />
          </mask>
          <mask id="mask3">
              <path id="path3_m" d="M1054.5,399.5c.3-159.5,21.7-422.2,42,0" />
          </mask>
          <mask id="mask4">
              <path id="path4_m" d="M1097,400c.3-73.6,26.2-196.4,40,0" />
          </mask>
          <mask id="mask5">
              <path id="path5_m" d="M1138,400c-.1-24.1,47.7-102.5,67,82" />
          </mask>
          <mask id="mask6">
              <path id="path6_m" d="M1205,482c1.9-11.9,56.7-134,91,9" />
          </mask>
          <mask id="mask8">
              <path id="path8_m" d="M1294,492C1122,40.1,887.4-84.9,539.5,396.5" />
          </mask>
          <mask id="maskB1">
              <path id="path_b1_m" d="M541,426.5c-.4-38.4,55.1-399.7,140.5-63-54.5-105.5-139.6-89.3-140-42" />
          </mask>
          <mask id="maskB2">
              <path id="path_b2_m" d="M542,426.5c.4-38.4-55.6-398.7-141-62,54.5-105.5,140.1-91.3,140.5-44" />
          </mask>
          <mask id="mask9">
              <path id="path9_m" d="M541,322.5C544.5,191.8,752.1-20.6,868,400" />
          </mask>
          <mask id="mask10">
              <path id="path10_m"
                  d="M867.5,402.5l-59,33,58,22-56-4,55-5-56-2,57-5-57-2,57-6-58-2,58-6-58-2,59-23" />
          </mask>
          <mask id="mask11">
              <path id="path11_m" d="M867.5,401.5c-16.3-192.3-494.2-690.2-576-7" />
          </mask>
      </g>

        <!-- use for fake morphing effect on some letters -->
        <clipPath id="r_clipPath">
            <circle id="r_circle" cx="200" cy="402" r="0" />
        </clipPath>
        <clipP.........完整代码请登录后点击上方下载按钮下载查看