gsap+svg实现跳动的小绵羊动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg实现跳动的小绵羊动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body {
  background: #abc7ca;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

svg {
  margin: 0 auto;
  left: 50%;
  top: 0;
  height: auto;
  width: 100%;
}

.hills__back {
  fill: #7da8ae;
}
.hills__front {
  fill: #92b7bc;
}

.body {
  fill: #ffffff;
}

.leg--back .leg__fur {
  fill: #eee;
}
.leg--back .leg__hoof {
  fill: #ccc;
}
.leg--front .leg__fur {
  fill: #ffffff;
}
.leg--front .leg__hoof {
  fill: #ddd;
}

.ear--right .ear__back {
  fill: #eee;
}
.ear--right .ear__front {
  fill: #ffdcdc;
}
.ear--left .ear__back {
  fill: #ffffff;
}
.ear--left .ear__front {
  fill: #ffe4e4;
}

.saddle__tassels {
  stroke: #58595b;
}
.saddle__back {
  fill: #f7a387;
}
.saddle__front {
  fill: #f0e86b;
}
.saddle__dots {
  fill: #58595b;
}

.face__back {
  fill: #eee;
}
.face__eye {
  stroke: #58595b;
}
.face__mouth {
  stroke: #58595b;
}
.face__nose {
  stroke: #58595b;
}
.face__cheeks {
  fill: #f2c2c2;
}
</style>




</head>

<body>
  <svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" clip-rule="evenodd" viewBox="-500 0 3500 2000">
	<title id="uniqueTitleID">Llama</title>
	<desc id="uniqueDescID">skipping</desc>

	<g class="hills">
		<path class="hill hill--1 hills__back" d="M0 1342.16c79.7 0 2051.26-19.34 2051.7-19.79 3.93-3.9-155.29-35.6-248.85-75.85-103.87-44.67-232.88-141.28-339.83-229.95-179.88-149.15-300.06-317.37-425.92-445.77-78-79.58-158.12-211.38-381.93-223.48-200.84-10.86-373.4 296.24-420.44 463.06C193.12 957.97 37.13 1265.81 0 1342.16z"/>
		<path class="hill hill--2 hills__back" d="M0 1342.16c79.7 0 2051.26-19.34 2051.7-19.79 3.93-3.9-155.29-35.6-248.85-75.85-103.87-44.67-232.88-141.28-339.83-229.95-179.88-149.15-300.06-317.37-425.92-445.77-78-79.58-158.12-211.38-381.93-223.48-200.84-10.86-373.4 296.24-420.44 463.06C193.12 957.97 37.13 1265.81 0 1342.16z"/>
		<path class="hill hill--3 hills__front" d="M322.95 1339.67l2463.58 2.49s-150.51-85.28-274.01-247.93c-116.01-152.8-279.78-467.85-609.88-466.55-290.44 1.16-491.25 171.15-645.25 307.57-162.02 143.5-552.6 356.94-934.44 404.42z"/>
		<path class="hill hill--4 hills__front" d="M322.95 1339.67l2463.58 2.49s-150.51-85.28-274.01-247.93c-116.01-152.8-279.78-467.85-609.88-466.55-290.44 1.16-491.25 171.15-645.25 307.57-162.02 143.5-552.6 356.94-934.44 404.42z"/>
	</g>
	<g class="llama">
		<g class="leg leg--back leg--right">
			<path class="leg__fur" d="M1527.1 1387.75c-16.2.19-51.6 4.59-59.74 23.17-13.99 31.93 1.27 144.24 5.97 191.84 3.33 33.76 3 80.84.18 114.64-5.3 63.68-22.12 109.82 64.27 110.14 13.4.05 37.23-2.43 48.22-14.54 21.13-23.28 27.97-141.3 29.86-209.35 1.68-60.48-11.44-188.97-22.35-205.53-10.29-15.61-47.87-10.6-66.4-10.37z"/>
			<path class="leg__hoof" d="M1582.75 1816.32c-11.7 9.02-35.84 12.06-50.08 11.2-19.34-1.17-28.56-5.63-34.71-11.8-14.67-14.68-34.7-75.67 10.03-86.91 25.69-6.45 34.84 20.9 33 39.19-.35 3.57 0 0 0 0s.2 1.9.89-2.47c3.17-20.07 21.62-43.3 47.59-30.75 14.41 6.97 14.8 20.59 10.48 42.53-3.43 17.42-7.14 31.26-17.2 39z"/>
		</g>

		<g class="leg leg--back leg--left">
			<path class="leg__fur" d="M928.93 1444.29c-16.21.18-53.92-2.3-62.06 16.28-13.99 31.94-1.52 93.48 3.17 141.08 3.33 33.76 3 80.84.19 114.64-5.3 63.68-22.12 109.82 64.27 110.14 13.4.05 37.23-2.43 48.22-14.54 21.12-23.28 27.97-141.3 29.86-209.35 1.68-60.48-3.15-131.66-14.06-148.22-10.28-15.61-51.06-10.25-69.6-10.03z"/>
			<path class="leg__hoof" d="M978.99 1815.4c-11.65 9.09-34.89 11.35-49.7 10.75-18.33-.75-28.46-6.37-34.62-12.53-14.66-14.7-34.69-75.68 10.04-86.92 25.69-6.45 34.83 20.9 33 39.19-.35 3.57 0 0 0 0s.2 1.9.88-2.47c3.18-20.07 21.63-43.3 47.6-30.75 12.98 6.29 15.1 21.56 11.7 37.42-3.98 18.53-7.92 36.73-18.9 45.3z"/>
		</g>

		<g class="ear ear--right">
			<path class="ear__back" d="M1537.91 636.27c20.04 12.52 146.2-81.3 120.32-156.18-20.75-60.05-80.73-36.06-105.57 4.71-27.95 45.9-43 133.8-14.75 151.47z"/>
			<path class="ear__front" d="M1537.91 636.27c-2.39 8.83 31.44-6.26 56.04-26.03 15.23-12.23 30.8-27.8 43.18-44.95 13.4-18.59 23.04-39.05 24.41-59.18.6-8.8-.18-17.6-3.31-26.02-4.14-11.14-29.86 14.14-56.35 53.86-30.09 45.15-62.64 97.4-63.97 102.32z"/>
		</g>

		<path class="body" d="M817.03 1116.6c155.95-20.35 308.55-42.54 467.39-42.54.07 0-.04.05 0 0 2.03-2.03-10.66-9.5-12.18-10.6-22.18-16.12-26.87-45.21-18.4-71.83 9.02-28.33 45.3-38.14 72.24-33.9 2.47.4 3.23.78 0 0-20.34-4.83-52.62-14.18-62.71-33.52-14.81-28.4-3.57-57.25 6.77-70 9.97-12.3 36.08-20.62 36.08-20.62s-24.18-6.51-38.9-21.52c-22.4-22.84-32.57-52.5-26.96-81.8 4.87-25.38 27.33-57.88 56.8-63.58 31.7-6.14 51.24 16.34 42.92 9-11.6-10.24-15.35-38.58-15.23-45.08.59-30.01 11.69-52.04 42.85-60.42 24.09-6.48 41.98 4.71 56.87 17.76 10.8 9.47 15.36 37.95 15.36 37.95s-.36-8.47-.36-12.7c0-25.73 0-43.53 22.77-60.08 12.35-8.99 47.03-5.53 57.8 2.24 27.37 19.72 16.45 56.9 13.69 62.42-3.43 6.88 7.05-18.27 22.9-27.8 22.72-13.65 42.9-17.57 71.25-3.4 31.08 15.55 35.63 56.52 20.18 85-.41.76-11.28 15.45-10.92 15.31 9.19-3.54 26.67-.67 39.39 6.97 13.45 8.09 27.27 29.87 24.94 62.4-1.84 25.76-13.5 47.64-31.56 65.43-10.9 10.73-28.27 14.52-28.27 14.52s12.56-2.98 26.59-1.17c16.44 2.12 38.68 14.96 43.04 44.74 5.16 35.21-7.94 53.05-26.87 68.48-11.9 9.7-32.48 15.09-32.48 15.09s21.3.5 34.05 13.85c16.52 17.29 20.92 43.05 8.65 67.99-5.96 12.13-15.92 19-21.57 23.14-8.02 5.87-14.62 7.77-9.41 6.97 20.12-3.1 40.07 4.6 53.63 26.9 11.59 19.06 7.55 51.26-4.44 70.09-9.56 15-20.15 21.45-29.81 26.22-6.9 3.4-18.4 5.26-14.97 4.75 7.2-1.05 34.1 7.64 43.23 28.57 10.63 24.42 9.92 64.77-26.64 90.22-16.32 11.38-31.65 12.78-34.8 12-3.77-.92 10.07 2.88 16.69 13.58 14.63 23.6 9 53.94-8.03 76.73-27.74 37.12-70.42 39.76-101.56 24.84-13-6.23-29.23-21.1-29.23-21.1s3.57 7.75 2.47 24.78c-2.53 39.08-37.87 63.88-68.01 70.15-64.34 13.39-100.57-17.77-110.8-38.43-.02-.04 5.24 23.96-10.94 46.07-13.98 19.1-30.61 32.87-60.28 36.16-58.98 6.56-101.41-30.58-103.3-47.11-1.5-13.16 3.96 13.94-10.31 32.29-17.83 22.95-49.75 32.89-84.52 30.33-38.32-2.84-55.6-11.56-82.58-39-14.08-14.3-19.63-32.9-19.77-32.24-1.78 8.3-6.3 17.97-14.65 27.77-13.35 15.65-35.85 26.24-65.04 24.48-33.1-2-57.7-14.08-75.66-39.4-10.64-15-12-29.37-12-29.37s-3.2 6.9-13.46 16.63c-20.98 19.89-36.38 31.95-62.83 27.99-13.69-2.06-25.66-4.11-37.24-19.6-5.84-7.81-7.07-18.14-7.07-18.14s-8.22 16.85-27.42 25.8c-32.16 15-80.36 7.1-102.3-36.4-13.15-26.03-4.48-49.13 9.76-70.5 4.6-6.9 28.92-27.75 25.94-25.41-47.16 37.12-96.82-20.27-84.37-75.9 6.1-27.27 26.65-47.1 49.6-43.42 3.5.56-6.34-2.5-13.26-11.2-12.61-15.86-14.3-35.84-6.57-56.48 9.2-24.58 25.35-43.2 50.6-50.7 21.7-6.46 63.1-4.76 81.33 15.97 1.36 1.54-27.72-52.96 30.84-84.65 61.8-33.45 107.48 10.74 111.06 28.03"/>

		<g class="saddle">
			<g class="saddle__tassels" fill="none" stroke-width="5.16">
				<g class="tassel tassel--1">
					<path d="M1186.64 1438.85l12.72 35.36" transform="matrix(.81198 .58369 -.81109 1.12832 1067.78 -1048.46)"/>
					<path d="M1188.25 1474.51l-1.61-35.66" transform="matrix(.81198 .58369 -.81109 1.12832 1067.78 -1048.46)"/>
					<path d="M1176.91 1475.04l9.73-36.19" transform="matrix(.81198 .58369 -.81109 1.12832 1067.78 -1048.46)"/>
				</g>
				<g class="tassel tassel--2">
					<path d="M1186.64 1438.85l12.72 35.36" transform="matrix(.9488 .31588 -.43895 1.31844 448.27 -940.55)"/>
					<path d="M1188.25 1474.51l-1.61-35.66" transform="matrix(.9488 .31588 -.43895 1.31844 448.27 -940.55)"/>
					<path d="M1176.91 1475.04l9.73-36.19" transform="matrix(.9488 .31588 -.43895 1.31844 448.27 -940.55)"/>
				</g>
				<g class="tassel tassel--3">
					<path d="M1186.64 1438.85l12.72 35.36" transform="matrix(1 0 0 1.38959 -130.01 -646.75)"/>
					<path d="M1188.25 1474.51l-1.61-35.66" transform="matrix(1 0 0 1.38959 -130.01 -646.75)"/>
					<path d="M1176.91 1475.04l9.73-36.19" transform="matrix(1 0 0 1.38959 -130.01 -646.75)"/>
				</g>
				<g class="tassel tassel--4">
					<path d="M1186.64 1438.85l12.72 35.36" transform="matrix(.96515 -.26169 .36364 1.34117 -505.52 -293.14)"/>
					<path d="M1188.25 1474.51l-1.61-35.66" transform="matrix(.96515 -.26169 .36364 1.34117 -505.52 -293.14)"/>
					<path d="M1176.91 1475.04l9.73-36.19" transform="matrix(.96515 -.26169 .36364 1.34117 -505.52 -293.14)"/>
				</g>
				<g class="tassel tassel--5">
					<path d="M1186.64 1438.85l12.72 35.36" transform="matrix(.86385 -.50375 .70002 1.2004 -798.05 134.52)"/>
					<path d="M1188.25 1474.51l-1.61-35.66" transform="matrix(.86385 -.50375 .70002 1.2004 -798.05 134.52)"/>
					<path d="M1176.91 1475.04l9.73-36.19" transform="matrix(.86385 -.50375 .70002 1.2004 -798.05 134.52)"/>
				</g>
			</g>
			<path class="saddle__back" d="M818.9 1113.28c17.83-12.76 180.28-23.36 210.92-26.72 14.14-1.55 148.25-17.03 233.86-15.91 16.94.22 18.02.44 20.19 1.93 9.87 6.8 7 67.86 1.74 87.33-12.85 47.56-54.98 219.9-255.52 203.84-97.8-7.83-153.42-46.56-194.73-123.78-17.91-33.47-32.14-115.47-16.47-126.7z"/>
			<path class="saddle__front" d="M937.74 1152.22c21.35 33.64 55.9 51.97 96.48 54.83 54.02 3.8 83.83-22.2 100.8-53.81 14.52-27.03 18.9-74.43 10.06-78.01-11.03-4.47-67.86 3.88-108.44 7.43-72.2 6.32-110.33 5.89-116.87 13.66-5.05 6 2.65 31.74 17.97 55.9z"/>

			<g class="saddle__dots">
				<ellipse class="dot dot--1" cx="978.03" cy="1235.06" rx="5.77" ry="5.5" transform="matrix(2.56069 0 0 2.68216 -1624.3 -2147.7)"/>
				<ellipse class="dot dot--2" cx="978.03" cy="1235.06" rx="5.77" ry="5.5" transform="matrix(2.56069 0 0 2.68216 -1582.73 -2084.75)"/>
				<ellipse class="dot dot--3" cx="978.03" cy="1235.06" rx="5.77" ry="5.5" transform="matrix(2.56069 0 0 2.68216 -1504.08 -2047.8)"/>
				<ellipse class="dot dot--4" cx=&qu.........完整代码请登录后点击上方下载按钮下载查看