gsap+svg实现千纸鹤飞翔动画效果代码-html代码-BFW代码库

gsap+svg实现千纸鹤飞翔动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap+svg实现千纸鹤飞翔动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.origami svg {
	height: 75vh;
}

.origami {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>



</head>

<body  >
  <div class="origami">
	<svg id="crane" width="1080" height="1080" viewBox="0 0 1080 1080">
		<path id="beakBack" d="M1543.248,1081.944,1429.09,1037.67l-87.364,129.31,117.064-94.366Z" transform="translate(-1235.694 -717.764)" fill="#00f5ff" stroke="#fff" stroke-width="2" />
		<path id="beakFront" d="M1543.248,1100.58l-132.8,66.4,112.991-110.657Z" transform="translate(-1304.416 -717.764)" fill="#01ccd5" stroke="#fff" stroke-width="2" />
		<path id="leftWing" d="M1390.656,1617.81l-51.264-160.771-246.952-242.3,542.839,111.84Z" transform="translate(-1078.44 -717.764)" fill="#00f5ff" stroke="#fff" stroke-width="2" />
		<path id="neckBack" d="M1430.257,1617.81h-73.4l-93.193-561.487Z" transform="translate(-1044.646 -717.764)" fill="#01ccd5" stroke="#fff" stroke-width="2" />
		<path id="Path_5" data-name="Path 5" d="M1071.464,1599.174l-9.319,44.262L941,1641.1l11.652-86.2Z" transform="translate(-363.183 -717.764)" fill="#01ccd5" stroke="#fff" stroke-width="2" />
		<path id="Path_6" data-name="Path 6" d="M1260.179,1554.9l-11.652,86.2-188.714,37.273,41.946-175.907Z" transform="translate(-670.711 -717.764)" fill="#01ccd5" stroke="#fff" stroke-width="2" />
		<path id="neckFront" d="M1355.7,1678.376l-170.078-622.052,88.531,25.62,156.1,284.242Z" transform="translate(-966..........完整代码请登录后点击上方下载按钮下载查看