TweenMax实现一个玻璃鱼缸飘着救生圈效果代码
代码语言：html
所属分类：动画
代码描述：TweenMax实现一个玻璃鱼缸飘着救生圈效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background-color:#FEE74C;
overflow: hidden;
text-align:center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
svg{
width:100%;
height:100%;
visibility:hidden;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
</style>
</head>
<body >
<svg class="bowlSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
<defs>
<clipPath id="waterMask">
<path id="waterSurface" d="M533.49,321.58a25.78,25.78,0,0,1-.44,4.72c-4.82,26.26-49.55,46.83-104,46.83s-99.19-20.58-104-46.83a25.78,25.78,0,0,1-.44-4.72,27.89,27.89,0,0,1,3.49-13.27c11.86-22,52.57-38.29,101-38.29s89.1,16.26,101,38.29A27.89,27.89,0,0,1,533.49,321.58Z" />
</clipPath>
<filter id="edgeClean" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncA type="table" tableValues="0 .5 1 1" />
</feComponentTransfer>
</filter>
</defs>
<ellipse fill="#878073" cx="430" cy="450" rx="89.5" ry="30.9" opacity="0.32"/>
<g class="bowlGroup">
<circle cx="428.57" cy="337.4" r="122.2" fill="#51b3ff" opacity="0.33"/>
<circle cx="428.57" cy="337.4" r="122.2" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3"/>
</g>
<g class="waterGroup" opacity="0.95">
<path d="M533.49,337.39a104.92,104.92,0,0,1-209.85,0c0-3.23.15-6.42.44-9.58a105.53,105.53,0,0,1,3.06-17.41c11.91-21.33,52.81-37.06,101.42-37.06S518.07,289.08,530,310.4c1.48,5.64,3,6.18,3.5,12.13C533.78,325.7,533.49,334.16,533.49,337.39Z" fill="#42bee4"/>
<use xlink:href="#waterSurface" fill="#90e2fa"/>
<g clip-path="url(#waterMask)">
<g class="lifeRing" opacity="1" filter="url(#edgeClean)" >
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<ellipse stroke-width="0.6" cx="30" cy="18" rx="28" ry="15" stroke="#FFF" fill="none" opacity="0.8"/>
<polygon points="34.18 5.44 33.97 9.77 33.47 4.64 33.68 0.31 34.18 5.44" fill="#792d12"/>
<path d="M28.39,0q2.69,0,5.3.31l.5,5.13A37.69,37.69,0,0,0,28.87,5a37.22,37.22,0,0,0-4.68.23L23.7.14C25.22,0,26.79,0,28.39,0Z" fill="#d6d6d6"/>
<path d="M33.69,5.37q-.78-.11-1.58-.19T30.4,5.06L28.87,5H28.5q-1.09,0-2.14.06t-2.16.18L24,9.57q1.06-.12,2.16-.18t2.14-.06h.37l1.53,0q.87,0,1.72.13t1.58.19l.49.07.21-4.33Z" fill="#b8b8b8"/>
<polygon points="24.19 5.24 23.98 9.57 23.49 4.47 23.7 0.14 24.19 5.24" fill="gray"/>
<path d="M42.63,7.89q-1-.46-2.05-.85-.86-.31-1.78-.59T37.12,6q-.79-.19-1.62-.34l-1.32-.22L34,9.77l1.32.22q.82.15,1.62.34t1.67.44q.92.27,1.78.59,1.08.39,2.05.85a13.53,13.53,0,0,1,5.92,4.72l.21-4.33A13.53,13.53,0,0,0,42.63,7.89Z" fill="#7d2f13"/>
<polygon points="58.74 12.73 58.53 17.06 48.34 16.93 48.55 12.61 58.74.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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