重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么用CSS和GSAP实现树枝发芽的loader动画
这篇文章主要介绍怎么用CSS和GSAP实现树枝发芽的loader动画，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
为淳安等地区用户提供了全套网页设计制作服务，及淳安网站建设行业解决方案。主营业务为网站设计、成都网站设计、淳安网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！
代码解读
定义dom，容器包含2个元素，branch代表枝，leaves代表叶，叶有6个子元素，代表6个叶片：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸，并设置子元素水平居中：
.sapling{
position:relative;
width:5em;
height:17.5em;
font-size:10px;
display:flex;
justify-content:center;
}
画出树枝：
.branch{
position:absolute;
width:0.2em;
height:inherit;
border-radius:25%;
background:burlywood;
}
定义树叶容器，设置为叶片在垂直方向均匀分布，并且从下到上排列：
.leaves{
position:absolute;
width:inherit;
height:15em;
top:1em;
display:flex;
flex-direction:column-reverse;
}
设置叶片的尺寸和和背景颜色：
.leavesspan{
width:2.5em;
height:2.5em;
background-color:limegreen;
}
设置左右叶片的各自样式：
.leavesspan:nth-child(odd){
border-bottom-left-radius:3em;
border-top-right-radius:3em;
transform-origin:rightbottom;
align-self:flex-start;
}
.leavesspan:nth-child(even){
border-bottom-right-radius:3em;
border-top-left-radius:3em;
transform-origin:leftbottom;
align-self:flex-end;
}
至此，静态效果绘制完成，接下来开始写动画脚本。
引入GSAP库：
声明一个时间线对象：
letanimation=newTimelineMax();
增加树枝的入场动画效果，并为这个动画设置一个标签branch：
animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch');
增加树叶的入场动画效果，它的参数中有3个0.5，从左到右的含义分别是动画时长、多个叶片动画的间隔时长、相对branch标签动画的延迟时间：
animation.from('.branch',4,{scaleY:0,ease:Power1.easeOut},'branch')
.staggerFrom('.leavesspan',0.5,{scale:0,ease:Power1.easeOut},0.5,0.5,'branch');
增加叶片变黄的动画效果：
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});
大功告成！
以上是“怎么用CSS和GSAP实现树枝发芽的loader动画”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文名称：怎么用CSS和GSAP实现树枝发芽的loader动画
文章源于：http://cqcxhl.com/article/gciogg.html