gsap+svg实现小鸡听音乐跳舞动画效果代码-html代码-BFW代码库

gsap+svg实现小鸡听音乐跳舞动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现小鸡听音乐跳舞动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
	margin: 0;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background-color: #e6e6e6;
}
svg {
	width: 100vw;
	height: 100vh;
}

.hidden {
	visibility: hidden;
}
</style>


</head>

<body  >
  <svg viewBox="190 190 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
	<g id="scene">
		<rect width="1080" height="1080" fill="#E6E6E6" />
		<ellipse id="shadow" cx="526.126" cy="765.556" rx="175.972" ry="33.5184" fill="#DDDDDD" />
		<g id="legLeft">
			<rect id="Rectangle 6" width="28.4382" height="69.5478" rx="14.2191" transform="matrix(-1 0 0 1 483.913 715.256)" fill="#6B6B6B" />
			<rect width="28.4382" height="69.5478" rx="14.2191" transform="matrix(-0.735032 -0.678032 -0.678032 0.735032 487.568 725.065)" fill="#6B6B6B" />
		</g>
		<g id="legRight">
			<rect x="567.914" y="714.395" width="28.4382" height="69.5478" rx="14.2191" fill="#6B6B6B" />
			<rect x="564.259" y="724.203" width="28.4382" height="69.5478" rx="14.2191" transform="rotate(-42.6901 564.259 724.203)" fill="#6B6B6B" />
		</g>
		<g id="middle">
			<g id="body">
				<ellipse cx="528.781" cy="653.821" rx="126.827" ry="112.632" fill="#2AD867" />
				<path fill-rule="evenodd" clip-rule="evenodd" d="M528.781 766.454C598.826 766.454 655.608 716.026 655.608 653.821C655.608 651.881 655.553 649.952 655.444 648.035L655.156 646.867C574.777 745.976 524.171 757.356 424.893 717.088L428.616 722.919C451.822 749.411 488.06 766.454 528.781 766.454Z" fill="#28CF65" />
			</g>
			<path id="armRight" d="M654.385 717.896C703.901 688.949 652.099 523.642 600.298 546.495C531.738 602.867 589.633 740.75 654.38.........完整代码请登录后点击上方下载按钮下载查看