居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器大小，设置子元素level居中：.sapling{position:relative;宽度：5em；高度：17.5em；字体大小：10px；显示：弹性；justify-content:center;}绘图分支：.branch{position:absolute;宽度：0.2em；身高：继承；边界半径：25%；background:burlywood;}定义叶子容器，设置叶子在垂直方向均匀分布，从底部开始上面排列：.leaves{position:absolute;宽度：继承；高度：15em；顶部：1em；显示：弹性；flex-direction:column-reverse;}设置叶子的大小和背景颜色：.leavesspan{width:2.5em;高度：2.5em；background-color:limegreen;}设置左右叶子各自的样式：.leavesspan:nth-child(odd){border-bottom-left-radius:3em;border-top-right-radius:3em;变换原点：右下角；align-self:flex-start;}.leavesspan:nth-child(even){border-bottom-right-radius:3em;border-top-left-radius:3em;变换原点：左下角；align-self:flex-end;}至此，静态效果绘制完成，接下来开始编写动画脚本引入GSAP库：声明一个时间轴对象：letanimation=new时间线最大值();增加分支的进入动画效果，为这个动画设置一个标签分支：animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch');increase树叶的入口动画效果，其参数中有3个0.5，从左到右的含义分别是动画时长、多叶动画的间隔时长、相对于树枝标签动画的延迟时间：animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch').staggerFrom('.leavesspan',0.5,{scale:0,ease:Power1.easeOut},0.5,0.5，'分支'）;增加树叶变黄的动画效果：animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch').staggerFrom('.leavesspan',0.5,{scale:0,ease:Power1.easeOut},0.5,0.5,'branch').to(['.branch','.leavesspan'],3,{backgroundColor:'yellow'});增加淡出效果：animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch').staggerFrom('.leavesspan',0.5,{scale:0,ease:Power1.easeOut},0.5,0.5,'branch').to(['.branch','.leavesspan'],3,{backgroundColor:'yellow'}).to(['.branch','.leavesspan'],1,{autoAlpha:0});修改声明时间轴的代码，使动画重复播放：letanimation=newTimelineMax({repeat:-1,repeatDelay:0.5});你完成了！