TweenMax+svg实现水母气泡向上飘动动画效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现水母气泡向上飘动动画效果代码
代码标签： TweenMax svg 水母 气泡 向上 飘动 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
background-color:#031B25;
overflow:hidden;
}
body, html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container{
width:900px;
height:600px;
}
svg{
position:absolute;
width:100%;
}
.volGroup{
cursor:pointer;
display:none;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600">
<defs>
<linearGradient id="edgeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3D80CF;stop-opacity:0.1" />
<stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3D80CF;stop-opacity:1" />
<stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
</linearGradient>
<linearGradient id="tendrilGrad">
<stop offset="5%" style="stop-color:#24B9BD;stop-opacity:1" />
<stop offset="95%" style="stop-color:#3D80CF;stop-opacity:0" />
</linearGradient>
<circle id="bubble" fill="none" stroke="#00588D" cx="0" cy="2" r="2" />
<clipPath id="jellyMask">
<circle class="jellyMask" fill="#FF0000" cx="268.5" cy="193" r="70" />
</clipPath>
<clipPath id="jellyStrandMask">
<path class="jellyStrandMask" fill="#FF0000" d="M457,228v192H171V228c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3
c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.3-0.9,5-2.3c2-1.7,4.8-3.7,8.8-3.7
c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
s3.3-0.9,5-2.3C450.1,230,453,228,457,228z" />
</clipPath>
<circle id="bgCircle" fill="url(#bodyGrad)" opacity="0.1" cx="300" cy="300" r="300" />
<clipPath id="bgMask">
<use xlink:href="#bgCircle" />
</clipPath>
</defs>
<use xlink:href="#bgCircle" />
<g class="maskedAll" clip-path="url(#bgMask)">
<g class="jellyfishGroup">
<g class="maskedJellyGroup" clip-path="url(#jellyMask)">
<path class="frill" fill="#D0E6F2" opacity="0.8" d="M448.1,210.7c-1.7,1.4-2.5,2.3-5,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7
c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7
c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.2-2.3
c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.2-2.3c-2-1.6-4.4-3.7-9.1-3.7
c-4,0-6.9,2.1-8.9,3.7c-1.7,1.4-2.5,2.3-5,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7
c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3
s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7
s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7v6c2.5,0,3.6,0.9,5.2,2.3
c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3s3.6,0.9,5.2,2.3c2,1.6,4.4,3.7,9.1,3.7
c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3
c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3
c2,1.6,4.4,3.7,9.1,3.7s6.9-2.1,8.9-3.7c1.7-1.4,3-2.3,5-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7
c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3
c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7
c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s6.9-2.1,8.9-3.7c1.7-1.4,3-2.3,5-2.3
v-6C453,212,450.1,214,448.1,215.7z" />
<path class="jellyBody" fill="url(#bodyGrad)" opacity="0.8" d="M452,191.1V40H171v150v6c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7
c4.7,0,7.1-2,9.1-3.7c1.6-1.4,2.8-2.3,5.3-2.3c2.5,0,3.6,0.9,5.2,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7
c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3
c2,1.7,4.4,3.7,9.1,3.7s7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,6.9-2,8.9-3.7
c1.7-1.4,3-2.3,5-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.6-1.4,2.8-2.3,5.3-2.3
c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7
c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7s7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3
s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,8.9-3.7,8.9-3.7V191.1z" />
</g>
<g class="maskedJellyStrandGroup" clip-path="url(#jellyStrandMask)">
<g class="jellyStrandGroup" fill="url(#tendrilGrad)">
<path d="M259.6,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
s-4.4,37-8.6,49C263.3,621.1,259.6,631.6,259.6,653z" />
<path d="M278.4,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
s-4.4,37-8.6,49C282.1,621.1,278.4,631.6,278.4,653z" />
<path d="M240.8,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
s-4.4,37-8.6,49C244.6,621.1,240.8,631.6,240.8,653z" />
</g>
</g>
</g>
<g class="bubbleGroup">
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />
<use xlink:href="#bubble" />.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0