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 12.73" fill="#b2421b"/>
<path d="M33.68.31C46,1.57,56.09,6.56,58.75,12.73l-10.19-.13C46.47,9.21,41,6.46,34.18,5.44Z" fill="#ca4b1e"/>
<g style="isolation: isolate">
<path d="M49.44,15.79l-.21,4.33a4.87,4.87,0,0,0,0-.71,5.88,5.88,0,0,0-.87-2.48l.21-4.33a5.88,5.88,0,0,1,.87,2.48,4.87,4.87,0,0,1,0,.71Z" fill="#858585"/>
</g>
<path d="M59.36,16.94a7.55,7.55,0,0,1-.15.8L59,22.06a7.54,7.54,0,0,0,.15-.8v-.06q0-.3.06-.61l.21-4.33C59.41,16.49,59.39,16.72,59.36,16.94Z" fill="#999"/>
<path d="M58.75,12.73a8.24,8.24,0,0,1,.65,2.47,7.36,7.36,0,0,1-.19,2.53L49,17.61a4.94,4.94,0,0,0,.43-2.53,5.88,5.88,0,0,0-.87-2.48Z" fill="#d6d6d6"/>
<polygon points="59.2 17.73 58.99 22.06 48.78 21.94 48.99 17.61 59.2 17.73" fill="#bcbcbc"/>
<polygon points="36.5 29.5 36.29 33.82 35.8 28.69 36.01 24.36 36.5 29.5" fill="#792d12"/>
<path d="M59.07,18.2a8.31,8.31,0,0,1-.5,1.22,9.61,9.61,0,0,1-.72,1.2,11.54,11.54,0,0,1-1,1.2,14.27,14.27,0,0,1-1.31,1.24,18.18,18.18,0,0,1-1.82,1.34A24.17,24.17,0,0,1,50.83,26a39.76,39.76,0,0,1-11.37,3.16q-1.45.2-3,.32l-.21,4.33q1.51-.12,3-.32a39.76,39.76,0,0,0,11.37-3.16,24.17,24.17,0,0,0,2.93-1.61,18.19,18.19,0,0,0,1.82-1.34,14.28,14.28,0,0,0,1.31-1.24,11.55,11.55,0,0,0,1-1.2,9.61,9.61,0,0,0,.72-1.2,8.31,8.31,0,0,0,.5-1.22q.07-.23.13-.46l.21-4.33Q59.14,18,59.07,18.2Z" fill="#a93f19"/>
<path d="M59.2,17.74c-1.51,6.09-10.64,10.81-22.7,11.76L36,24.36c6.56-.85,11.54-3.43,13-6.75Z" fill="#ca4b1e"/>
<path d="M23.43,5.34a26.27,26.27,0,0,0-7.52,2.09A16,16,0,0,0,14,8.5a12.05,12.05,0,0,0-1.2.89,9.48,9.48,0,0,0-.87.83,7.66,7.66,0,0,0-.64.8,6.38,6.38,0,0,0-.48.79l-.16.34-.21,4.33.16-.34a6.38,6.38,0,0,1,.48-.79,7.66,7.66,0,0,1,.64-.8,9.48,9.48,0,0,1,.87-.83,12.06,12.06,0,0,1,1.2-.89,16,16,0,0,1,1.95-1.07,26.27,26.27,0,0,1,7.52-2.09L24,9.57l.21-4.33Z" fill="#ae411a"/>
<polygon points="10.62 12.14 10.41 16.47 0.21 16.34 0.42 12.01 10.62 12.14" fill="#b2421b"/>
<path d="M23.7.14l.49,5.1c-6.87.77-12.11,3.44-13.57,6.9L.42,12C1.91,5.8,11.34,1,23.7.14Z" f.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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