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