gsap+svg实现草绘肯特龙行走动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：gsap+svg实现草绘肯特龙行走动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 1rem;
	background-color: rgb(237, 251, 255);
	display: flex;
	justify-content: center;
	align-items: center;
}

.kentrosaurus {
	width: min(30rem, 50vw);
	height: auto;
	position: relative;
	z-index: 1;
}

.hills {
	position: absolute;
	bottom: 0;
	width: 100%;
	max-height: 70vh;
}
</style>


</head>

<body  >
  <svg class="hills" viewBox="0 0 1366 768" preserveAspectRatio="none"><path fill="#e8c795" d="M1283.7 326.5c-103.8 28.3-213.1-4.7-320.4-12.3-49.9-3.6-100-1.6-150 .4-42.7 1.7-85.6 3.4-127.2 13.4-48.3 11.6-93.6 34.2-142.3 43.5-94.1 17.9-189.2-15.1-281.4-40.9-85.9-24-181.3-41.2-262.4-7.4V768h1366V297.7c-27.4 9.4-54.5 21.3-82.3 28.8z"/></svg>

<svg class="kentrosaurus" viewBox="0 0 2436.7 1850.4"><g id="fill_body" fill="#FCF0EB"><path d="M1664.3 971.5c-4-5 0-15 2-23 3-8 2-17 2-25-8 2-15 0-21-4-8-5-17-9-20-16-2-9 3-20 10-26 18-13 40-5 60-4 6.7 0 13.3 2.2 20 4.2.1-2 .1-4-.1-6.1-.5-4.8-1.9-8.2-7-9.6-4.7-1.3-9.8-2.3-13.9-4.8-6.2-3.8-14.1-5.6-17.8-12.3 11.4-10.2 22-20.1 33.1-29.5 6.3-5.4 8.9-12.2 9.5-20.1.5-7 1.3-13.9 1.5-20.9.5-15.3.8-30.6.9-45.9 0-4.3-.9-8.1-6.2-10.1-3.6-1.4-6.2-5.5-9.6-8.6 3.5-4.8 6.7-8.6 9.2-12.9 1.6-2.7 3-6.1 2.8-9-.4-6.3-1.2-12.7-3.1-18.7-7.1-22.3-18.4-42.6-31.8-61.7-.5-.7-1.7-.7-3.7-1.5-2.3 4.3-5.2 8.4-6.8 12.9-5.3 15.2-11.3 14.1-23.4 9.2-5.2-2.1-10.5-4.1-15.3-7-6.6-3.9-13.2-8.4-13.8-17.1-.9-13.6-.8-27.2-2.1-40.7-1.4-15-1.1-29.8-.5-44.8.2-4.7-.6-10.3-3-14.2-13.5-22.5-27.5-44.7-41.6-66.8-4.6-7.3-9.8-14.1-17.9-18.3-2.3-1.2-4.9-4.3-5-6.7-.6-9.8-5.6-17.8-11-24.9-10.5-13.7-22.2-26.5-33.7-39.3-5.6-6.3-12.1-11.9-18.7-18.3-3.1 5.2-5.7 9.5-8.2 13.7-.8 1.4-1.7 2.9-2.2 4.5-.7 2.5-1.5 5.1-1.6 7.7-.6 10.6-8.1 16.5-17.8 12.6-7.6-3-14.4-8.1-21.9-11.6-10.9-5.1-12.7-14.4-13.9-25.1-1.9-16.8-6.1-33.3-12-49.2-1.6-4.4-4.1-7.4-8.4-9.1-13.7-5.1-27.2-10.8-41.1-15.3-34.4-11-70-15.7-106-18-7.2-.4-12.9.2-17.4 6.5-2.9 4-7.1 7.1-10 11.1-3.3 4.5-7.4 5.4-12.3 4-4.1-1.2-8.3-2.6-12.1-4.6-6.5-3.3-12.8-7-19-10.7-6.8-4.1-13.9-5.1-21.9-4-29 4.1-58 7.7-87.1 11-5.7.6-8.5 2.9-9.6 8.1-.5 2.3-.6 4.6-1.3 6.9-2.6 9.1-9.8 12.8-18.6 9.1-4.2-1.8-8.1-4.4-11.8-7.1-10.4-7.6-21-13.1-34.8-10.3-14 2.9-28.2 4.9-42.4 6.7-8.2 1-14.9 3-16.2 12.5h-26.2c-3 0-6.1-.4-8.8.4-32.6 9.1-65.6 17.3-97.7 28.1-28.3 9.5-55.5 22-83.1 33.4-2.8 1.2-5.7 3.6-7.3 6.2-3 5-6.9 7.4-12.7 8.3-9.8 1.5-19.7 3-28.7 7.8-3.2 1.7-6.6 3.1-9.9 4.5-16.4 7.3-32.8 14.4-49.1 21.9-4 1.9-7.4 5.1-11.1 7.7v-.1c-3 2-5.8 4.4-9 5.8-8.4 3.8-17.4 6.5-25.6 10.7-21.8 11.3-43.2 23.4-64.9 34.8-17.3 9.1-35.1 17-53.7 23.2-13.1 4.4-25.9 9.5-39.9 14.8 2.4 2.2 4 3.7 5.6 5.2 5.5 4.7 7.1 10.3 4.9 16.9-1 3.2-2.8 4.5-6.2 5.3-10.3 2.5-20.7 4.6-31.3 4.5-5.7 0-11.4-.6-19.5-1-7.6 7.3-17 16.3-26.1 25 3 8 14.2 7.9 13.1 18.8-7.3 1-14.6 2.3-22 3-7.3.7-13.2 2.5-16.7 10.1-2.6 5.7-7 10.5-10.5 15.7-6.1 9.1-12.7 17.9-18.1 27.4-10.3 18.6-20 37.5-29.7 56.4-2.9 5.7-5.1 11.8-8.1 18.8 4.2-.7 7.1-1.2 9.9-1.7 3.9-.6 7.8-1.8 11.7-1.7 5.3.1 8.7 3.7 9.7 8.4 1 5-2.4 7.3-5.6 9.6-1.6 1.1-3.7 1.6-5.5 2.4-13.4 6.2-26 13.6-36.6 24.1 2.9 3.5 6.1 6.4 8 10 3.6 6.7 6.3 13.8 12.2 19.1 2.1 1.9 2.5 5.5 3.9 8.8-13.8 6.7-26.5 12.9-39.2 19.1-.6.3-1.6.2-1.8.6-1.1 2.1-3.1 4.5-2.9 6.5.7 6.2 2.2 12.3 3.5 18.4.8 3.9.3 7.2-3.1 9.8-4.7 3.5-9.3 7.1-13.7 10.6 3.3 1.7 7.4 3 10.5 5.6 1.9 1.5 3.8 5.8 3 7.4-5.2 9.7-3.5 20.8-6.7 30.8-1.8 5.8-1.7 11.6-.3 17.6 1.3 5.8 1.6 11.8 1.8 17.8.7 16.4 4.7 32.3 10.3 47.4 4.9 13.3 12 25.8 19.1 38.1 10 17.2 19.9 34.4 33.3 49.4 7.7 8.6 15.2 17.7 21.3 27.5 9.9 16 23.4 28.7 37.4 40.7 12.2 10.5 24.3 21 37.5 30.4 14 9.9 26.1 22.4 39.7 32.8 17.6 13.5 34.5 28.4 55.2 37.2 14 6 28.5 11 42.8 16.3 8.1 3 16.1 5 25.2 3.7 9.2-1.2 17.5 2.3 24.2 9.5 2.1 2.2 5.3 3.8 8.3 4.6 16.1 4 32.3 7.6 48.4 11.5 18.4 4.4 36.7 8.9 55 13.7 3 .8 5.4.8 7.8-.2 1.1-.4 2.1-1 3.2-1.9 2.8-2.1 6.3-3.5 9.7-4.5 10.2-3 19.1.8 27.1 6.5 3 2.1 6.1 5.6 6.9 9 .1.5.3.9.4 1.4 1.5 4.5 4.5 6.4 8.8 7.8 10.2 3.1 20.3 6.2 30.4 9.5 7.5 2.5 14.8 6 22.4 8.1 14.1 3.9 28.1 8.5 42.5 10.3 38 4.8 76.1 5.3 114.3 1.3 12.5-1.3 25.5-1.9 37.9-.2 29.6 4.1 58.9 10.1 88.4 14.9 41 6.6 81.7 15.3 123.7 10.6 26.1-2.9 52.2-5 77.8-11.4 4.9-1.2 10.8-1.7 14.6-4.2.4-.3.8-.6 1.2-1 7.6-7.4 16.5-12.1 25.4-17.1 11.3-6.3 22.4-7.2 32.9 1.9.6-.1 1.1-.2 1.7-.3.8-.1 1.6-.3 2.3-.5 5.2-1.4 7.8-2.2 9.2-4.1 1.3-1.7 1.7-4.3 2.2-9.2.7-6.9 1.2-13.9 1.8-20.8.4-4.8 2.9-7.6 7.6-7.3 12.7.8 25.2 2.3 35 11.9 1.6 1.6 3.3 3 4.9 4.5 1.1-.4 2.1-.8 3.1-1.2 2.4-.9 4.6-1.7 6.6-2.7 19.1-9.2 38-18.9 57.3-27.6 15-6.8 30.8-11.9 45.9-18.6 18.8-8.4 37.2-17.7 55.6-26.9 5.3-2.6 10.6-5.7 15.1-9.6 19.2-16.5 34.8-36.4 49-57.2 7.1-10.3 13.9-21 19.4-32.2 14.1-28.6 26.4-58 37-88.1 5.3-15.2 8.6-30.6 12-46.2 1.3-5.7 2.2-11.5 3.4-17.5-1-.2-1.9-.5-2.9-.8h-.9c-9.3 14.1-33.3 15.1-41.3 6.1zM1265 304.1c7.8 3.6 15.3 7.9 22.3 12.7 5.8 3.9 10.8 8.9 16 13.5 1.6 1.4 2.7 3.4 4.9 6.4-4.6 1.1-7.4 1.8-10.7 2.6.4 1.7.4 3.1 1 4.1 8.3 12 8.1 25.8 7.4 39.4-1.3 26.3-1.6 52.5 1.4 78.7 1.2 10.4 3.1 20.7 6.4 31.2 1-1.8 2.3-3.6 2.9-5.5 4.5-15 13.6-27.8 20.4-41.7 5.8-11.9 11.8-23.8 17.1-35.9 1.8-4 4-5.9 8-6 12.8-.5 25 1.2 35.6 9 1.7 1.2 2.9 3.6 3.4 5.6 1.2 4.8 1.7 9.8 2.9 14.7 3.6 14.4 7.4 28.8 11.2 43.6h12.8c5.4 2.8 7.2 8.4 8.5 13.6 2.5 10.2 4.7 20.4 9.6 29.9 2.9 5.8-3.3 14.1-10.4 13.1-13.3-1.8-26.3-6.1-35.2-16.8-8.4-10.2-15.5-21.6-22.9-32.6-1.8-2.7-2.9-6-4.5-8.9-1.2-2.1-2.8-4-4.9-7-7.1 11.8-11.3 23.2-15.7 34.5-2.3 6.1-5.5 11.9-8.3 17.8-3.4 7.2-7.4 14.2-10 21.7-5.6 16.3-10.5 32.9-15.4 49.4-1.8 6-3 12.3-.4 18.6 1.8 4.3-.1 7.8-3 10.7-3.3 3.3-7.4 4.8-11.9 2.8-5.5-2.4-11.1-4.8-16-8.2-5.4-3.7-8.4-8.8-7.2-16.2 1.9-11.7 3.6-23.6 3.9-35.5.3-11.2-.8-22.6-2-33.8-3.3-30.4-7.9-60.7-10.4-91.2-1.6-19.8-1-39.9-.4-59.8.5-17.6-.9-34.4-8.8-50.5-2.7-5.6-4-12-5.5-18.1-1.1-6.1 1.8-8.8 7.9-5.9zM690 1015c-10.9 6.8-21.6 13.9-32.6 20.7-3.9 2.4-8.4 3.8-12.1 6.4-6.4 4.6-12.3 9.9-18.5 14.8-6.5 5.1-13.1 10.2-19.7 15.2-8 6.1-15.2 12.8-20.7 21.3-1.4 2.2-4.6 4.8-6.7 4.6-5.5-.5-7.8 3.5-10.7 6.3-8 7.8-15.5 16.3-23.3 24.3-3.9 3.9-8.5 4.8-13.6 2-6.1-3.3-12.4-6.2-19.1-9.5-7.3 1.7-11 8.5-16.4 13.9-4.3.4-8.1-1.2-11.6-4.1-6.8-5.7-7.7-11.2-1.5-17.9 6.9-7.5 14.7-14.2 22.2-21.1 6.6-6 13.5-11.6 20.7-17.8-1.9-2.1-3.2-3.4-4.4-4.9-5.1-6.3-4.2-7.8 1.1-14.2 8.7-10.4 17.1-21.1 24.4-32.5 7.9-12.3 18.3-21.7 30.8-28.8 2.3-1.3 5.8-1.2 8.5-.6 6.2 1.3 11.6.8 16.6-3.7 6.6-5.9 13.7-11.3 20.9-16.6 1.8-1.3 5.4-2.7 6.8-1.8 5.7 3.3 10.4.9 15.1-1.4 7.4-3.7 14.9-7.4 21.7-11.9 4.4-2.9 7.7-2.7 11.8-.3 8.6 5 16 11.4 22.3 19.1.8 1 1.6 2.2 2 3.4 2.4 7.2 4.6 14.4 7.3 22.6-7.1 4.3-14.4 8.2-21.3 12.5zm41-462.5c-17.5 5.1-34.9 10.7-52.1 16.8-26 9.1-51.9 18.7-77.7 28.4-12.1 4.5-23.7 10.3-35.8 14.7-16.2 5.8-32.8 10.8-49.1 16.2-11.9 4-23.8 8-37.4 12.7 3.4 2.3 5.4 3.8 7.4 5 15.4 9.2 31 17.9 46.1 27.7 10.3 6.6 19.6 14.7 29.4 22.1 9.2 6.9 18.3 14 27.9 20.4 15 10.1 27.9 22.5 40 35.8 5.1 5.6 10.7 10.8 15.8 16.4 6.4 7 5.6 13-3.4 15.9-10 3.2-20.6 5.9-31.1 6.7-26.5 2-52.9 4.8-79.3 8.1-24.5 3.1-49 3.5-73.5-1.8-13.2-2.8-23.9-9.6-34.3-17.3-6.6-4.9-12.4-11.1-18.4-16.8-3.2-3.1-3.2-6.3.1-9.4 5.9-5.4 13-6 20.5-4.4 8.8 1.9 15.9 7 21.7 13.4 9.4 10.4 20.7 15.8 34.4 18.3 20.6 3.7 41 2.5 61.5-.6 14.1-2.1 28.3-3.6 42.5-5.4 2.9-.4 5.8-.9 10.7-1.7-5.4-6.5-9.4-12-14.1-16.9-18.9-19.8-41.8-34.5-64.4-49.5-6.3-4.2-12-9.4-18.1-13.9-2.4-1.8-5.2-2.9-7.8-4.4-11-6-21.8-12.3-33-17.9-5.3-2.6-11.2-4-16.8-5.8-8.5-2.8-16.9-5.5-25.3-8.1-.7-6.5 2-10.7 6.3-13.5 5.5-3.7 11.2-7.5 17.3-9.6 33.7-11.4 67.6-22.1 101.3-33.6 23.2-7.9 46.2-16.8 69.2-25.2 31.4-11.6 62.8-23.3 94.3-34.7 8.7-3.1 17.9-5.1 26.8-7.7 2.8-.8 5.4-2 8.9-3.2-1.9-2.3-2.8-4.3-4.4-5.2-11.1-6.6-22.3-12.9-33.6-19.3-1.4-.8-3.1-1.1-4.6-1.5-6.7-1.7-13.6-3-20.2-5.1-18.4-5.6-36.5-8.4-55.6-2.2-17.3 5.6-34.6 11.7-53 12.4-16.3.6-32.6 1.1-48.8 1.1-11.2 0-21.6 2.4-32 6.4-12.3 4.7-25.1 8.5-37.9 12-3.9 1.1-8.3-.1-12.1-.2-2.2-5.5.5-8.1 3.5-10.3 10.8-7.9 22.5-13.8 35.1-18.3 12.7-4.6 25-10.6 37.5-15.7 9.8-4 19.8-7.8 29.7-11.5 10.6-4 21.1-8.2 31.9-11.5 20.3-6.3 40.7-12.3 62-14.2 13-1.1 25.3-4.8 37.9-10.1-6.6-2.6-13-5.7-19.7-7.7-14.3-4.3-28.8-8-43.2-12-12.6-3.4-12.6-3.4-8.2-16.2.3-.9.4-1.8.6-2.7 2.5-.3 5.3 0 7.3-1.1 6-3.3 12.4-3.4 18.5-2.4 16.3 2.5 32.5 2.4 48.7.6 27.7-3 55.5-6.1 83.1-9.5 14.8-1.8 29.5-4.2 44.1-6.9 16.2-3 32.3-6.8 48.6-9.8 10.1-1.8 20.4-2.7 30.5-4.2 9.9-1.4 19.7-3.1 29.6-4.3 13.5-1.7 27-3.1 40.5-4.6 11.6-1.3 23.1-2.8 34.7-3.7 6.6-.5 13.2.3 19.8 0 8.6-.4 17.1-1.6 25.7-1.9 10.3-.4 20.6.3 30.9-.4 18.9-1.2 37.7 1.5 56.5 1.8 21.5.4 43 .6 64.5.6 5.8 0 10.4 1.3 12.9 8.3-9.3 2.2-18.5 4.6-27.8 6.4-14.8 2.9-29.7 3.2-44.7 2.9-28.3-.5-56.5-.7-84.8-1-9-.1-17.9 0-26.9-.2-4-.1-7 .5-8.7 4.8-1.9 5.1-6.2 7.6-11.4 8.7-9.1 1.9-18.1 4.1-27.2 5.6-12.2 2.1-23.9 5.6-35.2 10.7-18.7 8.4-37.8 16.2-56.5 24.6-4.5 2-9.4.1-13.8 3.3-3.6 2.6-8 4.3-12.3 5.7-12.9 4.3-25.8 8.3-38.8 12.2-3.1.9-6.5.8-9.8 1.3-10.5 1.6-20.9 3.7-31.4 5-15.3 1.9-31.1 2.1-45.5-2.7-10-3.4-17.8-.5-26.4 1.9-31 8.8-62.1 17.4-93.9 22.8-13.2 2.3-25.9 7.1-38.7 11.8 7.2 3.4 14.3 4.7 21.7 2.7 9.6-2.6 19.2-5.2 28.6-8.4 24.8-8.4 49.8-10.3 75.7-5.4 18 3.4 36.4 5.4 52.8 13.5 15.1 7.4 28.9 17.5 42.9 26.9 3.6 2.4 5.7 7.1 8.5 10.7-4.2 8.8-11 13.1-19.3 15.3-16.3 4.6-32.5 8.4-48.4 13zm124.5 77.8c-15.4 3.3-25.4-5.8-35.1-14.3-3.2-2.8-8.1-7-5.3-14.3 15.6 5.5 25.8 18.2 39.5 25 .7.3.6 2.2.9 3.6zm106.7 8.8c-7.1 16.9-7.9 34.6-7.8 52.6 0 7.8-1.5 15.7-2.4 23.5-.3 2.3-1.6 4.6-1.2 6.7 3.6 18..........完整代码请登录后点击上方下载按钮下载查看