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

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

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