gsap模仿海底鱼儿游动动画效果代码

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

网友评论0