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