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