gsap模仿海底鱼儿游动动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap模仿海底鱼儿游动动画效果代码，包含小鱼儿和大鱼
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
.mid_blue_stroke_100_3pt_bubble{fill:none;stroke:#00BCB2;stroke-width:3;stroke-miterlimit:10;}
  .dark_blue_fill_100{fill:#004247;}
  .dark_blue_fill_85{fill:#265E63;}
  .dark_blue_fill_75{fill:#407175;}
  .dark_blue_fill_50{fill:#80A0A3;}
  .white_fill{fill:#FFFFFF;}
  .dark_blue_stroke_100_2pt{fill:none;stroke:#004247;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .dark_blue_stroke_100_6pt{fill:none;stroke:#004247;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}   .dark_blue_stroke_100_30pt_legs{fill:none;stroke:#004247;stroke-width:30;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .dark_blue_stroke_50_2pt{fill:none;stroke:#80A0A3;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .mid_blue_fill_100_50_opacity{opacity:0.5;fill:#00BCB2;}
  .red_fill_100{fill:#FF7070;}
  .st0{fill:#598488;}
  .st1{fill:#FFB7B7;mix-blend-mode:lighten;}
  .st2{fill:#FF5757;mix-blend-mode:overlay;}
  .st3{fill:none;stroke:#80A0A3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .st4{fill:none;stroke:#004247;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
  .fillnone{fill:none;}

  body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #fff2ca;
  }

  svg {
    position: absolute;
    min-width: 100vw;
    max-height: 100vh;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }

        
/* original css animations */
  /*#squish-fish {
                transform-origin: 376.8333px 290.9662px;
                animation-name: bobbin-up-down;
                animation-duration: 3s;
                animation-iteration-count: infinite;
                animation-timing-function: ease-in-out; 
        }

        .red_fill_100{
                animation-name: color-change;
                animation-duration: 6s;
                animation-iteration-count: infinite;
        }

        @keyframes bobbin-up-down {
                0%{
                        transform: scaleY(1) translateY(0px);
                }
                25%{
                        transform: scaleY(0.9) translateY(50px);
                }
                100%{
                        transform: scaleY(1) translateY(0px);
                }
        }

        @keyframes color-change{
                0%, 100%{
                        fill:#FF7070;
                }
                50%{
                        fill:#4c1fdb;
                }
        }
*/
</style>

  

</head>

<body >
  <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">

  
  <path id="mpath" class="fillnone" d="M1076.93,380.7c0,0,97.31-0.22,110.78,0
                c254.1,4.14,468.75,47.57,542.97,127.35c18.03,19.39,27.78,40.91,27.78,64.53c0,210.24-220.28,333.6-369.17,384.13
                C963.9,1101.07,900.81,378.68,570.83,378.68h-0.01H150.82C430.17,377.73,1076.93,380.7,1076.93,380.7"/>
  
<g id="background-seaweed">
        <g id="seaweed01">
                <path class="dark_blue_fill_100" d="M450.21,883.09c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V883.09z"/>
                <path class="dark_blue_fill_100" d="M450.21,706.63c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V706.63z"/>
        </g>
        <g id="seaweed02">
                <path class="dark_blue_fill_100" d="M234.48,794.86c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V794.86z"/>
                <path class="dark_blue_fill_100" d="M234.48,971.32c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V971.32z"/>
                <path class="dark_blue_fill_100" d="M234.48,618.4c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V618.4z"/>
        </g>
        <g id="seaweed03">
                <path class="dark_blue_fill_100" d="M1619.02,618.49c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V618.49z"/>
                <path class="dark_blue_fill_100" d="M1619.02,442.03c15.72-25.69,24.78-55.9,24.78-88.23s-9.06-62.53-24.78-88.23V442.03z"/>
                <path class="dark_blue_fill_100" d="M1619.02,265.57c-15.72-25.69-24.78-55.9-24.78-88.23s9.06-62.53,24.78-88.23V265.57z"/>
        </g>
</g>
<g id="bubbles">
        <circle id="bubble01" class="mid_blue_stroke_100_3pt_bubble" cx="1330.01" cy="201" r="31.28"/>
        <circle id="bubble02" class="mid_blue_stroke_100_3pt_bubble" cx="698.64" cy="272.44" r="31.28"/>
        <circle id="bubble03" class="mid_blue_stroke_100_3pt_bubble" cx="1389.28" cy="308.94" r="15.64"/>
        <circle id="bubble04" class="mid_blue_stroke_100_3pt_bubble" cx="683" cy="104.76" r="15.64"/>
        <circle id="bubble05" class="mid_blue_stroke_100_3pt_bubble" cx="1326.46" cy="363.49" r="7.82"/>
        <circle id="bubble06" class="mid_blue_stroke_100_3pt_bubble" cx="985.57" cy="483.91" r="7.82"/>
        <circle id="bubble07" class="mid_blue_stroke_100_3pt_bubble" cx="308.37" cy="677.93" r="31.28"/>
        <circle id="bubble08" class="mid_blue_stroke_100_3pt_bubble" cx="389.1" cy="583.31" r="15.64"/>
        <circle id="bubble09" class="mid_blue_stroke_100_3pt_bubble" cx="1032.2" cy="528.25" r="15.64"/>
        <circle id="bubble10" class="mid_blue_stroke_100_3pt_bubble" cx="326.28" cy="520.43" r="7.82"/>
        <circle id="bubble11" class="mid_blue_stroke_100_3pt_bubble" cx="587.16" cy="229.39" r="7.82"/>
</g>
<g id="fish">
        <g id="squish-fish">
                <path id="sf-leg01" class="dark_blue_stroke_100_30pt_legs" d="M312.11,380.15c0,0-25.52,12.39-25.52,42.25"/>
                <path id="sf-leg02" class="dark_blue_stroke_100_30pt_legs" d="M344.47,380.15c0,0-12.76,12.39-12.76,42.25"/>
                <path id="sf-leg03" class="dark_blue_stroke_100_30pt_legs" d="M376.83,380.15c0,0,0,12.39,0,42.25"/>
                <path id="sf-leg04" class="dark_blue_stroke_100_30pt_legs" d="M409.19,380.15c0,0,12.76,12.39,12.76,42.25"/>
                <path id="sf-leg05" class="dark_blue_stroke_100_30pt_legs" d="M441.56,380.15c0,0,25.52,12.39,25.52,42.25"/>
                <path id="sf-body" class="dark_blue_fill_100" d="M517.71,318.58c0,77.8-63.07,79.13-140.88,79.13s-140.88-1.33-140.88-79.13
                        s63.07-159.05,140.88-159.05S517.71,240.78,517.71,318.58z"/>
                <path id="sf-top-highlight01" class="dark_blue_fill_85" d="M294.06,286.26c12.74,15.4,43.16-23.71,82.77-23.71
                        s70.03,39.1,82.77,23.71c7.97-9.63,20.82-7.95,29.75-1.77c2.62,1.81,6.13-0.41,5.52-3.54c-4.78-24.71-16.35-48.89-33.33-68.9
                        c-23.6-27.8-53.68-43.12-84.71-43.12s-61.11,15.31-84.71,43.12c-16.98,20.01-28.55,44.2-33.33,68.9c-0.61,3.13,2.9,5.36,5.52,3.54
                        C273.24,278.31,286.1,276.63,294.06,286.26z"/>
                <path id="sf-top-highlight02" class="st0" d="M451.92,277.85c-4.65,0-12.56-4.39-20.94-9.04c-14.65-8.13-32.89-18.25-54.14-18.25
                        c-21.25,0-39.49,10.12-54.14,18.25c-8.38,4.65-16.3,9.04-20.94,9.04c-1.38,0-2.21-0.38-3.06-1.42c-4.87-5.88-11.5-8.99-19.18-8.99
                        c-2.25,0-4.52,0.27-6.76,0.79c-3.07,0.71-5.77-2.21-4.87-5.22c5.69-19.16,15.56-37.46,28.82-53.09c22.44-26.44,50.9-41,80.14-41
                        s57.7,14.56,80.14,41c13.26,15.63,23.14,33.93,28.82,53.09c0.9,3.02-1.81,5.93-4.87,5.22c-2.24-0.52-4.51-0.79-6.76-0.79
                        c-7.68,0-14.32,3.11-19.18,8.99C454.13,277.46,453.3,277.85,451.92,277.85z"/>
                <g id="sf-spots">
                        <circle class="dark_blue_fill_75" cx="295.55" cy="361.83" r="10.58"/>
                        <circle class="dark_blue_fill_75" cx="418.76" cy="367.91" r="12.24"/>
                        <circle class="dark_blue_fill_75" cx="480.29" cy="339.24" r="8.74"/>
                        <circle class="dark_blue_fill_75" cx="345.33" cy="371.49" r="6.31"/>
                        <circle class="dark_blue_fill_75" cx="340.98" cy="311.92" r="5.29"/>
                        <circle class="dark_blue_fill_75" cx="281.89" cy="325.66" r="5.29"/>
                        <circle class="dark_blue_fill_75" cx="308.37" cy="338.12" r="3.74"/>
                        <circle class="dark_blue_fill_75" cx="354.68" cy="325.66" r="1.87"/>
                        <circle class="dark_blue_fill_75" cx="388.02" cy="355.67" r="1.87"/>
                        <circle class="dark_blue_fill_75" cx="264.69" cy="338.11" r="2.82"/>
                        <circle class="dark_blue_fill_75" cx="465.92" cy="320.37" r="2.82"/>
                        <circle class="dark_blue_fill_75" cx="437.64" cy="339.07" r="3.91"/>
                        <circle class="dark_blue_fill_75" cx="462.04" cy="365.17" r="3.89"/>
                </g>
                <path id="sf-mouth" class="dark_blue_stroke_100_6pt" d="M363.78,206.25c2.51,4.63,7.42,3.89,13.05,3.89
                        c5.64,0,10.54,0.74,13.05-3.89"/>
                <path id="sf-chin" class="dark_blue_stroke_100_2pt" d="M384.11,221.08c-1.4-1.73-4.13-2.91-7.28-2.91
                        c-3.14,0-5.88,1.18-7.28,2.91"/>
                <circle id="sf-left-eye" class="white_fill" cx="334.9" cy="190.73" r="6.07"/>
                <circle id="sf-left-pupil" class="dark_blue_fill_100" cx="334.9" cy="188.78" r="4.12"/>
                <circle id="sf-right-eye" class="white_fill" cx="418.76" cy="190.73" r="6.07"/>
                <circle id="sf-right-pupil" class="dark_blu.........完整代码请登录后点击上方下载按钮下载查看