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