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