TweenMax实现一个玻璃鱼缸飘着救生圈效果代码-html代码-BFW代码库

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