TweenMax+svg实现水母气泡向上飘动动画效果代码-html代码-BFW代码库

TweenMax+svg实现水母气泡向上飘动动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现水母气泡向上飘动动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
      body{
  background-color:#031B25;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container{
  width:900px;
  height:600px;
}

svg{
  position:absolute;
  width:100%;
}

.volGroup{
  cursor:pointer;
  display:none;
}
  </style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600">
    <defs>
      <linearGradient id="edgeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3D80CF;stop-opacity:0.1" />
        <stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
      </linearGradient>
      <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3D80CF;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
      </linearGradient>
      <linearGradient id="tendrilGrad">
        <stop offset="5%" style="stop-color:#24B9BD;stop-opacity:1" />
        <stop offset="95%" style="stop-color:#3D80CF;stop-opacity:0" />
      </linearGradient>

      <circle id="bubble" fill="none" stroke="#00588D" cx="0" cy="2" r="2" />

      <clipPath id="jellyMask">
        <circle class="jellyMask" fill="#FF0000" cx="268.5" cy="193" r="70" />
      </clipPath>
      <clipPath id="jellyStrandMask">
        <path class="jellyStrandMask" fill="#FF0000" d="M457,228v192H171V228c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3
	c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
	s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.3-0.9,5-2.3c2-1.7,4.8-3.7,8.8-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
	c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7.........完整代码请登录后点击上方下载按钮下载查看