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_blue_fill_100" cx="418.76" cy="188.78" r="4.12"/>
		<path id="sf-head-spot" class="dark_blue_fill_50" d="M376.83,159.53c-8.88,0-17.58,1.06-26,3.06c-4.69,1.11-6.53,6.75-3.37,10.39
			c7.13,8.21,17.65,13.41,29.38,13.41c11.73,0,22.25-5.2,29.38-13.41c3.16-3.64,1.31-9.28-3.37-10.39
			C394.41,160.59,385.72,159.53,376.83,159.53z"/>
	</g>
	<g id="round-fish01">
		<path id="rf01-back-fin" class="dark_blue_fill_100" d="M1096.42,256.73c0,0-6.96-0.86-16-17.13
			c-15.06-27.11-43.94-50.82-57.41-50.82c-6.02,0,35.01,20.88,35.01,74.25s-41.04,74.25-35.01,74.25
			c13.48,0,42.35-23.72,57.41-50.82c9.04-16.27,16-17.13,16-17.13V256.73z"/>
		<path id="rf01-top-fin" class="dark_blue_fill_100" d="M1213.84,203.37c-12.48-9.8-29.99-14.32-33.94-12.62
			c-3.95,1.69,3.39,7.19,0,6.14c-3.39-1.06-15.06-2.75-19.39-0.11c-4.49,2.73,3.01,2.74,1.88,5.27c-1.13,2.53-18.26,6.81-12.42,9.22
			C1155.43,213.52,1213.84,203.37,1213.84,203.37z"/>
		<path id="rf01-fish-body" class="red_fill_100" d="M1193.74,199.51c-49.74,0-55.15,49.28-91.27,54.76c-5,0.76-9.85,2.3-14.24,4.82
			l-3.82,2.19c-1.35,0.78-1.35,2.73,0,3.5l3.82,2.19c4.39,2.52,9.24,4.06,14.24,4.82c36.13,5.48,41.54,54.76,91.27,54.76
			c35.08,0,74.25-39.81,74.25-63.52C1267.99,238.75,1228.82,199.51,1193.74,199.51z"/>
		<path id="rf01-body-highlight" class="st1" d="M1240.66,239.87c-14.76-8.34-32.3-13.31-46.92-13.31
			c-25.55,0-38.01,8.55-51.21,17.6c-10.62,7.29-21.6,14.82-39.32,16.49c-4.36,0.41-4.36-0.78,0-1.44
			c17.72-2.69,28.7-14.77,39.32-26.46c13.19-14.52,25.66-28.24,51.21-28.24c14.62,0,32.16,7.99,46.92,21.36
			C1254.23,238.16,1254.23,247.53,1240.66,239.87z"/>
		<g id="rf01-flipper">
			<path class="dark_blue_fill_100" d="M1196.97,317.8c-17.39-4.25-31.1,3.91-33.79,7.06c-2.69,3.15,2.53,1.17,3.43,4.2
				c0.41,1.4-0.21,3.45,2.92,3.86c3.69,0.49,2.87,4.23,5.83,4.01c3.97-0.31,3.84,0.56,6.25,2.02c3.69,2.24,2.87-4.53,6.32-10.38
				C1191.24,322.98,1196.97,317.8,1196.97,317.8z"/>
			<path class="dark_blue_stroke_50_2pt" d="M1170.12,325.75c7.65-5.84,18.82-4.71,18.82-4.71s-7.41,5.51-7.97,12.24"/>
			<path class="dark_blue_stroke_50_2pt" d="M1175.69,328.08c0,0,6.85-5.66,13.26-7.04"/>
		</g>
		<path id="rf01-eye" class="dark_blue_stroke_100_2pt" d="M1244.25,252.81c0,2,1.62,3.62,3.62,3.62s3.62-1.62,3.62-3.62"/>
		<circle id="rf01-cheek" class="st2" cx="1233.71" cy="272.44" r="16"/>
		<path id="rf01-mouth" class="dark_blue_stroke_100_2pt" d="M1265.49,264.53h-8.15c-1.65,0-3.23-0.65-4.4-1.82l0,0"/>
	</g>
	<g id="round-fish02">
		<path id="rf02-back-fin" class="dark_blue_fill_100" d="M1030.08,370.65c0,0-4.19-0.52-9.62-10.3
			c-9.06-16.3-26.42-30.56-34.53-30.56c-3.62,0,21.06,12.56,21.06,44.65s-24.68,44.65-21.06,44.65c8.1,0,25.47-14.26,34.53-30.56
			c5.44-9.79,9.62-10.3,9.62-10.3V370.65z"/>
		<path id="rf02-top-fin" class="dark_blue_fill_100" d="M1100.69,338.56c-7.51-5.89-18.04-8.61-20.41-7.59
			c-2.38,1.02,2.04,4.33,0,3.69c-2.04-0.63-9.06-1.65-11.66-0.07c-2.7,1.64,1.81,1.65,1.13,3.17c-0.68,1.52-10.98,4.1-7.47,5.55
			C1065.56,344.66,1100.69,338.56,1100.69,338.56z"/>
		<path id="rf02-fish-body" class="red_fill_100" d="M1088.61,336.23c-29.91,0-33.17,29.64-54.89,32.93
			c-3.01,0.46-5.93,1.38-8.56,2.9l-2.3,1.32c-0.81,0.47-0.81,1.64,0,2.11l2.3,1.32c2.64,1.52,5.56,2.44,8.56,2.9
			c21.73,3.29,24.98,32.93,54.89,32.93c21.1,0,44.65-23.94,44.65-38.2C1133.26,359.83,1109.7,336.23,1088.61,336.23z"/>
		<path id="rf02-body-highlight" class="st1" d="M1116.83,360.51c-8.88-5.01-19.43-8.01-28.22-8.01c-15.37,0-22.86,5.14-30.8,10.59
			c-6.39,4.38-12.99,8.91-23.64,9.92c-2.62,0.25-2.62-0.47,0-0.87c10.65-1.62,17.26-8.88,23.64-15.91
			c7.93-8.73,15.43-16.98,30.8-16.98c8.79,0,19.34,4.8,28.22,12.85C1124.98,359.48,1124.98,365.11,1116.83,360.51z"/>
		<g id="rf02-flipper">
			<path class="dark_blue_fill_100" d="M1090.55,407.37c-10.46-2.55-18.7,2.35-20.32,4.25c-1.62,1.9,1.52,0.7,2.06,2.52
				c0.25,0.84-0.13,2.08,1.76,2.32c2.22,0.29,1.73,2.55,3.51,2.41c2.39-0.18,2.31,0.33,3.76,1.21c2.22,1.35,1.73-2.73,3.8-6.24
				C1087.1,410.49,1090.55,407.37,1090.55,407.37z"/>
			<path class="st3" d="M1074.4,412.16c4.6-3.51,11.32-2.83,11.32-2.83s-4.46,3.31-4.79,7.36"/>
			<path class="st3" d="M1077.75,413.56c0,0,4.12-3.41,7.97-4.23"/>
		</g>
		<path id="rf02-eye" class="st4" d="M1118.98,368.29c0,1.2,0.98,2.18,2.18,2.18c1.2,0,2.18-0.98,2.18-2.18"/>
		<circle id="rf02-cheek" class="st2" cx="1112.64" cy="380.09" r="9.62"/>
		<path id="rf02-mouth" class="st4" d="M1131.76,375.34h-4.9c-0.99,0-1.94-0.39-2.64-1.09l0,0"/>
	</g>
	<g id="round-fish03">
		<path id="rf03-b.........完整代码请登录后点击上方下载按钮下载查看