您好,登录后才能下订单哦!
这篇文章主要介绍怎么用CSS和GSAP实现树枝发芽的loader动画,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
代码解读
定义dom,容器包含2个元素,branch代表枝,leaves代表叶,叶有6个子元素,代表6个叶片:
<figureclass="sapling">
<divclass="branch"></div>
<divclass="leaves">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</figure>
居中显示:
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库:
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
声明一个时间线对象:
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动画”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。