gsap实现深海中的水母动画效果-html代码-BFW代码库

gsap实现深海中的水母动画效果

代码语言：html

所属分类：动画

代码描述：gsap实现深海中的水母动画效果

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

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

<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background: linear-gradient(#17a2b8, #072324);
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
}


svg {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 200px;
  position: absolute;
  bottom: 10vh;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
}


canvas#bubbles-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}
</style>

</head>
<body translate="no">
<div class="container">
<canvas id="bubbles-canvas"></canvas>
<svg class="jellyfish" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 278.8 291.7"><defs><style>.cls-1{fill:#b2d1dc;}.cls-2{fill:rgba(165, 191, 193, 0.5);}.cls-3{fill:#d5a2a2;}.cls-4{fill:rgba(148, 199, 204, 0.8);}.cls-5{fill:rgba(147, 203, 223, 0.5);}.cls-6{fill:#93b8c4;}.cls-7{fill:#c9ecf8;}.cls-8{fill:#dbf2f9;}.cls-9{fill:#eea4a4;}</style></defs>
<path class="cls-1" d="M177.4,279.8h-.1a1.1,1.1,0,0,1-1-1.2h0c0-.3.6-8.1,4.1-30.7s.1-45,0-45.3a1,1,0,0,1,.8-1.2h.1a1.1,1.1,0,0,1,1.3.9h0c0,.2,3.6,23.2,0,46s-4.1,30.3-4.1,30.4a1.1,1.1,0,0,1-1.1,1.1Z" transform="translate(0 0)" /><path class="cls-1" d="M175,266.1a1.2,1.2,0,0,1-1.1-.9l-3-21.6a290.3,290.3,0,0,1-2.6-38.4,1.3,1.3,0,0,1,1.2-1.1.9.9,0,0,1,1,.8v.2h0a285.8,285.8,0,0,0,2.6,38.1l3,21.6a1.2,1.2,0,0,1-1,1.2Z" transform="translate(0 0)" /><path id="left-leg" class="cls-1" d="M26.8,226.3a87.8,87.8,0,0,1-26-3.6,1.1,1.1,0,0,1-.7-1.4h0c.1-.5.8-.8,1.4-.7s21.3,6.9,44.4,1.3,27-15.4,27-15.5a1.3,1.3,0,0,1,1.5-.6,1.2,1.2,0,0,1,.6,1.4c-.2.5-4.6,11.1-28.6,16.9A86,86,0,0,1,26.8,226.3Z" transform="translate(0 0)" /><path class="cls-1" d="M31.3,282.5a1.1,1.1,0,0,1-.9-.5,1.1,1.1,0,0,1,.3-1.5c.2-.1,19.9-13.8,33.9-33.6s16.7-37,16.8-37.2a.9.9,0,0,1,.9-.9h.3a1.1,1.1,0,0,1,.9,1.3h0c-.1.7-2.8,17.8-17.1,38s-34.3,34.1-34.5,34.2Z" transform="translate(0 0)" /><path class="cls-1" d="M79.9,291.7a1.2,1.2,0,0,1-1.1-.9c0-.3-1.4-7.8,0-31.6a412.1,412.1,0,0,1,6.9-49.5,1.1,1.1,0,0,1,1.3-.8,1.1,1.1,0,0,1,.9,1.3h0A371,371,0,0,0,81,259.4c-1.4,23.5,0,30.9,0,31a1.1,1.1,0,0,1-.9,1.3h-.2Z" transform="translate(0 0)" /><path class="cls-1" d="M101.4,286.6a1.3,1.3,0,0,1-1.1-1.1c0-.1-.5-8-4.1-30.4s0-45.8,0-46a1.1,1.1,0,0,1,1.3-.9h0a.9.9,0,0,1,.9.9v.2h0c0,.3-3.5,22.9,0,45.3s4.1,30.4,4.2,30.7a1.3,1.3,0,0,1-1.1,1.2Z" transform="translate(0 0)" /><path class="cls-1" d="M103.9,272.9h-.2a.9.9,0,0,1-.9-.9v-.2h0l2.9-21.6a285.8,285.8,0,0,0,2.6-38.1,1.1,1.1,0,0,1,2.2,0,290.3,290.3,0,0,1-2.6,38.4L105,272A1.2,1.2,0,0,1,103.9,272.9Z" transform="translate(0 0)" /><path id="right-leg" class="cls-1" d="M252,219.5a86,86,0,0,1-19.6-2.2c-24-5.........完整代码请登录后点击上方下载按钮下载查看