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

代码语言：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-type(12) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(13) {
  height: 93.34386745%;
  left: 75.4074331093%;
  z-index: 9334;
  stroke: #616c4c;
}
.tree:nth-of-type(13) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(14) {
  height: 99.8346767126%;
  left: 23.9472120697%;
  z-index: 9983;
  stroke: #3a471f;
}
.tree:nth-of-type(14) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(15) {
  transform: scaleX(-1);
  height: 45.6649155393%;
  left: 54.3966676631%;
  z-index: 4566;
  stroke: #b0b5a5;
}
.tree:nth-of-type(15) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(16) {
  transform: scaleX(-1);
  height: 61.1849453994%;
  left: 28.5604355956%;
  z-index: 6118;
  stroke: #899179;
}
.tree:nth-of-type(16) .trunk {
  fill: #899179;
}

.tree:nth-of-type(17) {
  transform: scaleX(-1);
  height: 48.6479660021%;
  left: 86.2755845389%;
  z-index: 4865;
  stroke: #b0b5a5;
}
.tree:nth-of-type(17) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(18) {
  transform: scaleX(-1);
  height: 54.5941696935%;
  left: 43.8657033917%;
  z-index: 5459;
  stroke: #b0b5a5;
}
.tree:nth-of-type(18) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(19) {
  transform: scaleX(-1);
  height: 63.5381610266%;
  left: 86.4657513205%;
  z-index: 6354;
  stroke: #899179;
}
.tree:nth-of-type(19) .trunk {
  fill: #899179;
}

.tree:nth-of-type(20) {
  height: 88.5938310748%;
  left: 51.9167035797%;
  z-index: 8859;
  stroke: #616c4c;
}
.tree:nth-of-type(20) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(21) {
  transform: scaleX(-1);
  height: 45.8644304749%;
  left: 82.3313115491%;
  z-index: 4586;
  stroke: #b0b5a5;
}
.tree:nth-of-type(21) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(22) {
  height: 34.631317006%;
  left: 21.5647871057%;
  z-index: 3463;
  stroke: #d8dad2;
}
.tree:nth-of-type(22) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(23) {
  transform: scaleX(-1);
  height: 99.3524937334%;
  left: 78.293194769%;
  z-index: 9935;
  stroke: #3a471f;
}
.tree:nth-of-type(23) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(24) {
  transform: scaleX(-1);
  height: 91.6323916061%;
  left: 34.1543389592%;
  z-index: 9163;
  stroke: #616c4c;
}
.tree:nth-of-type(24) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(25) {
  transform: scaleX(-1);
  height: 95.2695920249%;
  left: 33.9564940058%;
  z-index: 9527;
  stroke: #3a471f;
}
.tree:nth-of-type(25) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(26) {
  height: 40.4041614117%;
  left: 27.2178843172%;
  z-index: 4040;
  stroke: #b0b5a5;
}
.tree:nth-of-type(26) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(27) {
  transform: scaleX(-1);
  height: 80.3821326861%;
  left: 38.7597074522%;
  z-index: 8038;
  stroke: #616c4c;
}
.tree:nth-of-type(27) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(28) {
  height: 27.682636612%;
  left: 49.4260861317%;
  z-index: 2768;
  stroke: #d8dad2;
}
.tree:nth-of-type(28) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(29) {
  transform: scaleX(-1);
  height: 67.4820262154%;
  left: 54.1050743789%;
  z-index: 6748;
  stroke: #899179;
}
.tree:nth-of-type(29) .trunk {
  fill: #899179;
}

.tree:nth-of-type(30) {
  transform: scaleX(-1);
  height: 89.8393432396%;
  left: 34.0163994119%;
  z-index: 8984;
  stroke: #616c4c;
}
.tree:nth-of-type(30) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(31) {
  transform: scaleX(-1);
  height: 73.162027976%;
  left: 23.6989334228%;
  z-index: 7316;
  stroke: #899179;
}
.tree:nth-of-type(31) .trunk {
  fill: #899179;
}

.tree:nth-of-type(32) {
  transform: scaleX(-1);
  height: 34.1563265721%;
  left: 81.3386057452%;
  z-index: 3416;
  stroke: #d8dad2;
}
.tree:nth-of-type(32) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(33) {
  height: 59.0551499816%;
  left: 93.0184987643%;
  z-index: 5906;
  stroke: #899179;
}
.tree:nth-of-type(33) .trunk {
  fill: #899179;
}

.tree:nth-of-type(34) {
  transform: scaleX(-1);
  height: 90.2756036173%;
  left: 43.1397985154%;
  z-index: 9028;
  stroke: #616c4c;
}
.tree:nth-of-type(34) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(35) {
  transform: scaleX(-1);
  height: 77.2529829249%;
  left: 18.7305459919%;
  z-index: 7725;
  stroke: #616c4c;
}
.tree:nth-of-type(35) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(36) {
  transform: scaleX(-1);
  height: 75.6896640012%;
  left: 95.0239843731%;
  z-index: 7569;
  stroke: #616c4c;
}
.tree:nth-of-type(36) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(37) {
  height: 37.4509617986%;
  left: 100.9930052382%;
  z-index: 3745;
  stroke: #b0b5a5;
}
.tree:nth-of-type(37) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(38) {
  height: 35.51801514%;
  left: 3.8182086757%;
  z-index: 3552;
  stroke: #b0b5a5;
}
.tree:nth-of-type(38) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(39) {
  height: 80.3736578492%;
  left: 5.0372948629%;
  z-index: 8037;
  stroke: #616c4c;
}
.tree:nth-of-type(39) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(40) {
  transform: scaleX(-1);
  height: 66.9816778284%;
  left: 74.9165608598%;
  z-index: 6698;
  stroke: #899179;
}
.tree:nth-of-type(40) .trunk {
  fill: #899179;
}

.tree:nth-of-type(41) {
  transform: scaleX(-1);
  height: 29.9897246409%;
  left: 58.9802841855%;
  z-index: 2999;
  stroke: #d8dad2;
}
.tree:nth-of-type(41) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(42) {
  transform: scaleX(-1);
  height: 91.741080529%;
  left: 43.5359618902%;
  z-index: 9174;
  stroke: #616c4c;
}
.tree:nth-of-type(42) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(43) {
  transform: scaleX(-1);
  height: 64.0560614436%;
  left: 17.1088412846%;
  z-index: .........完整代码请登录后点击上方下载按钮下载查看