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