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