gsap+svg实现可爱小熊绑在火箭发射升空动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：gsap+svg实现可爱小熊绑在火箭发射升空动画效果代码，键盘输入party五个字母有惊喜哦。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        * {
          box-sizing: border-box;
        }
        body {
          --hue: 12;
          --star: #f7c655;
          --bg: #262626;
          --strap: #212121;
          --red: #ed685e;
          --orange: #ed975e;
          --lime: #e4ed5e;
          --green: #84ed5e;
          --turquoise: #5ee4ed;
          --purple: #685eed;
          --indigo: #975eed;
          --violet: #ed5eb4;
          --tail: hsl(var(--hue), 27%, 62%);
          --stroke: #1a1a1a;
          --muzzle: hsl(var(--hue), 43%, 89%);
          --dark: hsl(var(--hue), 33%, 67%);
          --light: hsl(var(--hue), 65%, 79%);
          --strap: #333;
          background: var(--bg);
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          overflow: hidden;
        }
        svg {
          height: 100vmin;
          display: none;
        }
        .stars path {
          fill: var(--star);
        }
        .kitty__light {
          fill: var(--light);
        }
        .kitty__dark {
          fill: var(--dark);
        }
        .kitty__dark-stroke {
          stroke: var(--dark);
        }
        .kitty__stroke {
          stroke: var(--stroke);
        }
        .kitty__fill {
          fill: var(--stroke);
        }
        .kitty__muzzle {
          fill: var(--muzzle);
        }
        .kitty__tail {
          stroke: var(--tail);
        }
        .rocket__strap {
          fill: var(--strap);
        }
        .rocket__body path:nth-of-type(1) {
          fill: #a6a6a6;
        }
        .rocket__body path:nth-of-type(2) {
          fill: #333;
        }
        .rocket__body path:nth-of-type(3) {
          fill: #d9d9d9;
        }
        .rocket__body path:nth-of-type(4) {
          fill: #4d4d4d;
        }
        .rocket__stream path:nth-of-type(1),
        .rocket__bubbles path:nth-of-type(1),
        .rocket__stream path:nth-of-type(8),
        .rocket__bubbles path:nth-of-type(8) {
          fill: var(--red);
        }
        .rocket__stream path:nth-of-type(2),
        .rocket__bubbles path:nth-of-type(2),
        .rocket__stream path:nth-of-type(9),
        .rocket__bubbles path:nth-of-type(9) {
          fill: var(--orange);
        }
        .rocket__stream path:nth-of-type(3),
        .rocket__bubbles path:nth-of-type(3),
        .rocket__stream path:nth-of-type(10),
        .rocket__bubbles path:nth-of-type(10) {
          fill: var(--lime);
        }
        .rocket__stream path:nth-of-type(4),
        .rocket__bubbles path:nth-of-type(4),
        .rocket__stream path:nth-of-type(11),
        .rocket__bubbles path:nth-of-type(11) {
          fill: var(--green);
        }
        .rocket__stream path:nth-of-type(5),
        .rocket__bubbles path:nth-of-type(5),
        .rocket__stream path:nth-of-type(12),
        .rocket__bubbles path:nth-of-type(12) {
          fill: var(--turquoise);
        }
        .rocket__stream path:nth-of-type(6),
        .rocket__bubbles path:nth-of-type(6),
        .rocket__stream path:nth-of-type(13),
        .rocket__bubbles path:nth-of-type(13) {
          fill: var(--purple);
        }
        .rocket__stream path:nth-of-type(7),
        .rocket__bubbles path:nth-of-type(7),
        .rocket__stream path:nth-of-type(14),
        .rocket__bubbles path:nth-of-type(14) {
          fill: var(--indigo);
        }
        .rocket__stream path:nth-of-type(8),
        .rocket__bubbles path:nth-of-type(8),
        .rocket__stream path:nth-of-type(15),
        .rocket__bubbles path:nth-of-type(15) {
          fill: var(--violet);
        }
    </style>



</head>

<body>
    <svg class='scene' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1258 1186" clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
  <g class='rocket'>
    <g class='rocket__stream'>
      <path d="M745 608h6v263h-6z" />
      <path d="M761 608h6v263h-6z" />
      <path d="M755 608h6v263h-6z" />
      <path d="M749 608h6v263h-6z" />
      <path d="M778 608h6v263h-6z" />
      <path d="M772 608h6v263h-6z" />
      <path d="M767 608h6v263h-6z" />
    </g>
    <g class='rocket__bubbles'>
      <path d="M717 869a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M704 873a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M736 863a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M774 865a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M720 884a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M719 876a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M765 879a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M738 884a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M721 851a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M716 876a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M747 881a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M764 882a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M766 852a25 25 0 1150 0 25 25 0 01-50 0z" />
      <path d="M735 847a25 25 0 1150 0 25 25 0 01-50 0z" />
    </g>
    <g class='rocket__body'>
      <path d="M743 602h43v9h-43z"/>
      <path d="M776 601h10v10h-10z"/>
      <path d="M764 442c-17 0-31 15-31 33v129h63V475c0-18-14-33-32-33z"/>
      <path d="M764 442c18 0 32 15 32 33v129h-8V475c0-16-12-30-27-32l3-1z"/>
    </g>
  </g>
  <g class='kitty'>
    <g class='kitty__tails'>
      <path class='kitty__tail' d="M698 618c-2 16-9 38-6 53 3 12 14 22 15 35 1 16-6 32-8 46" fill="none" stroke-width="20"/>
      <path class='kitty__tail' d="M701 619c2 16 9 38 5 53-2 12-13 21-14 34-2 17 6 33 7 47" fill="none" stroke-width="20"/>
    </g>
    <g class='kitty__leg kitty__leg--right'>
      <path class='kitty__light' d="M670 588c8 0 15 7 15 15v93c0 8-7 15-15 15s-14-7-14-15v-93c0-8 6-15 14-15z"/>
      <path class='kitty__dark' d="M677 590l2 7v94c0 8-6 14-14 14l-7-2c2 5 7 8 12 8 8 0 15-7 15-15v-93c0-6-3-10-8-13z"/>
    </g>
    <g class='kitty__leg kitty__leg--left'>
      <path class='kitty__light' d="M730 591c8 0 14 6 14 14v94c0 8-6 14-14 14s-15-6-15-14v-94c0-8 7-14 15-14z"/>
      <path class='kitty__dark' d="M737 593l2 6v94c0 8-7 15-15 15-3 0-5-1-7-3 2 5 7 8 13 8 8 0 14-6 14-14v-94c0-5-3-10-7-12z"/>
    </g>
    <g class='kitty__body'>
      <path class='kitty__light' d="M699 446c27 0 49 22 49 48v97c0 27-22 48-49 48s-49-21-49-48v-97c0-26 22-48 49-48z"/>
      <path class='kitty__dark' d="M699 639c27 0 49-22 49-48l1-98c-1-15-10-28-21-37 5 8 9 17 9 27v97c1 27-21 48-48 49-12 0-22-4-30-10 9 12 24 20 40 20z"/>
    </g>
    <path class='rocket__strap' d="M652.........完整代码请登录后点击上方下载按钮下载查看