TweenMax+svg实现海底鱼儿游动冒泡动画效果代码-html代码-BFW代码库

TweenMax+svg实现海底鱼儿游动冒泡动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+svg实现海底鱼儿游动冒泡动画效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <style>
        body {
      background: #0f1030;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    
    canvas, svg {
      position: absolute;
    }
    
    #squid {
      fill: #d28bfd;
    }
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas id="canvas" width="200" height="200"></canvas>
    <svg id="squid" width="200" height="200" viewBox="0 0 340 340">
  <path id="squid-body" d="M100,250 C100,10 400,10 400,250" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C0,70 20,70 40,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
  <path class="squid-tenticle" d="M0,0 C6,70 34,70 38,0" />
    <circle class="eye" cx="125" cy="130" r="20" stroke-width="3" fill="#fff" />
    <circle class="eye" cx="125" cy="130" r="6" stroke-width="3" fill="#000" />
    <circle class="eye" cx="175" cy="130" r="20" stroke-width="3" fill="#fff" />
    <circle class="eye" cx="175" cy="130" r="6" stroke-width="3" fill="#000" />
</svg>
    <!-- partial -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RequestAnimationFrame.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>

    <script>
        function Glitter() {
      var _this = this;
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var glitterImagePath = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/53148/';
      var glitter = [];
      var glitterImages = [];
      var width, height;
      var glitterPointer = 0;
      var _squidPos;
      
      (function() {
        resize();
    
        for (var i = 0; i < 4; i++) {
          var img = new Image();
          img.src = glitterImagePath+'g'+i+'.png';
          glitterImages.push(img);
        }
        
        for (var i = 0; i < 300; i++) {
          glitter.push(new GlitterPiece(glitterImages[i%4]));
        }
        
        window.addEventListener('resize', resize);
      })();
      
      function GlitterPiece(img) {
        var _this = t.........完整代码请登录后点击上方下载按钮下载查看