TweenMax+DrawSVGPlugin实现森林树木生长动画效果代码-html代码-BFW代码库

TweenMax+DrawSVGPlugin实现森林树木生长动画效果代码

代码语言：html

所属分类：动画

代码描述：TweenMax+DrawSVGPlugin实现森林树木生长动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    #trees {
  position: relative;
  background: #fff;
  overflow: hidden;
  height: 25vh;
  width: 100%;
  margin-top: 70vh;
}

#floor {
  background: #3a471f;
  position: absolute;
  bottom: 0px;
  height: 0px;
  width: 100%;
  left: 0;
}

.tree {
  stroke: #3a471f;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2px;
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: -5px;
  transform-origin: center calc(100% - 5px);
}
.tree path:not(.trunk) {
  pointer-events: none;
}

.tree path {
  pointer-events: visibleStroke;
}

.tree:nth-of-type(1) {
  transform: scaleX(-1);
  height: 67.0322458663%;
  left: 32.3249715826%;
  z-index: 6703;
  stroke: #899179;
}
.tree:nth-of-type(1) .trunk {
  fill: #899179;
}

.tree:nth-of-type(2) {
  height: 64.4106956909%;
  left: 13.2650341875%;
  z-index: 6441;
  stroke: #899179;
}
.tree:nth-of-type(2) .trunk {
  fill: #899179;
}

.tree:nth-of-type(3) {
  transform: scaleX(-1);
  height: 53.1517788511%;
  left: 4.7694696135%;
  z-index: 5315;
  stroke: #b0b5a5;
}
.tree:nth-of-type(3) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(4) {
  height: 69.2350259458%;
  left: 38.1640314932%;
  z-index: 6924;
  stroke: #899179;
}
.tree:nth-of-type(4) .trunk {
  fill: #899179;
}

.tree:nth-of-type(5) {
  transform: scaleX(-1);
  height: 87.3381600843%;
  left: 89.4633926942%;
  z-index: 8734;
  stroke: #616c4c;
}
.tree:nth-of-type(5) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(6) {
  height: 70.8043982065%;
  left: 65.3280062597%;
  z-index: 7080;
  stroke: #899179;
}
.tree:nth-of-type(6) .trunk {
  fill: #899179;
}

.tree:nth-of-type(7) {
  transform: scaleX(-1);
  height: 25.8953850091%;
  left: 55.5467361588%;
  z-index: 2590;
  stroke: #d8dad2;
}
.tree:nth-of-type(7) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(8) {
  height: 50.5330928351%;
  left: 96.7686840624%;
  z-index: 5053;
  stroke: #b0b5a5;
}
.tree:nth-of-type(8) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(9) {
  transform: scaleX(-1);
  height: 44.0352209926%;
  left: 60.2333824176%;
  z-index: 4404;
  stroke: #b0b5a5;
}
.tree:nth-of-type(9) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(10) {
  height: 92.0729634451%;
  left: 87.8190645094%;
  z-index: 9207;
  stroke: #616c4c;
}
.tree:nth-of-type(10) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(11) {
  height: 92.6182025146%;
  left: 56.108786634%;
  z-index: 9262;
  stroke: #616c4c;
}
.tree:nth-of-type(11) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(12) {
  transform: scaleX(-1);
  height: 98.4979344793%;
  left: 27.7081857559%;
  z-index: 9850;
  stroke: #3a471f;
}
.tree:nth-of-typ.........完整代码请登录后点击上方下载按钮下载查看