gsap实现花木生长动画效果代码-html代码-BFW代码库

gsap实现花木生长动画效果代码

代码语言：html

所属分类：动画

代码描述：gsap实现花木生长动画效果代码，鼠标悬浮到树叶上看看效果

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap");
:root {
  --size: 150;
  --unit: calc((var(--size) / 1366) * 1vmin);
  --background: #e4e4e4;
}

* {
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background);
}

.loader {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200%;
  height: 100%;
  z-index: 9999;
}
.loader:nth-child(1) {
  background: #d5d5d5;
}

.loader {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200%;
  height: 100%;
  z-index: 9999;
}
.loader:nth-child(2) {
  background: #c5c5c5;
}

.loader {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200%;
  height: 100%;
  z-index: 9999;
}
.loader:nth-child(3) {
  background: #b6b6b6;
}

.loader {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 200%;
  height: 100%;
  z-index: 9999;
}
.loader:nth-child(4) {
  background: #a7a7a7;
}

.collage-container {
  position: relative;
  min-width: calc(1366 * var(--unit));
  height: calc(768 * var(--unit));
}
.collage-container #collage {
  width: 100%;
}
.collage-container #collage .sanko {
  opacity: 0.8;
  position: absolute;
  width: 100%;
}
.collage-container #collage #feather_1 {
  position: absolute;
  top: 19%;
  left: 35%;
  width: calc(100 * var(--unit));
}
.collage-container #collage #feather_2 {
  position: absolute;
  top: 62%;
  left: 24.5%;
  width: calc(208 * var(--unit));
}
.collage-container #collage #feather_3 {
  position: absolute;
  top: 22%;
  left: 22.5%;
  width: calc(208 * var(--unit));
}
.collage-container #collage #feather_4 {
  position: absolute;
  top: 63%;
  left: 20.5%;
  width: calc(208 * var(--unit));
}
.collage-container #collage #feather_5 {
  position: absolute;
  top: 16%;
  left: 30.5%;
  width: calc(150 * var(--unit));
}
.collage-container #collage #bird {
  position: absolute;
  top: 24.5%;
  left: 38.4%;
  width: calc(590 * var(--unit));
}
.collage-container #collage #left-branch {
  position: absolute;
  top: 41.5%;
  left: 16.5%;
  width:.........完整代码请登录后点击上方下载按钮下载查看