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
















网友评论0