重庆分公司
重庆分公司，新征程启航
为企业提供网站建设、域名注册、服务器等服务
怎么用纯CSS实现小球跳跃台阶的动画效果
这篇文章将为大家详细讲解有关怎么用纯CSS实现小球跳跃台阶的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
目前创新互联公司已为成百上千家的企业提供了网站建设、域名、网站空间、网站托管运营、企业网站设计、离石网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
代码解读
定义dom，容器中包含5个元素，代表5个台阶：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸：
.loader{
width:7em;
height:5em;
font-size:40px;
}
画出5个台阶：
.loader{
display:flex;
justify-content:space-between;
align-items:flex-end;
}
.loaderspan{
width:1em;
height:1em;
background-color:white;
}
用变量让5个台阶从低到高排序：
.loaderspan{
height:calc(var(--n)*1em);
}
.loaderspan:nth-child(1){
--n:1;
}
.loaderspan:nth-child(2){
--n:2;
}
.loaderspan:nth-child(3){
--n:3;
}
.loaderspan:nth-child(4){
--n:4;
}
.loaderspan:nth-child(5){
--n:5;
}
为台阶增加转换排序方向的动画效果：
.loaderspan{
animation:sort5sinfinite;
}
@keyframessort{
0%,40%,100%{
height:calc(var(--n)*1em);
}
50%,90%{
height:calc(5em-(var(--n)-1)*1em);
}
}
下面做小球的动画，用了障眼法，使2个同色小球的交替运动看起来就像1个小球在做往复运动。
用伪元素画出2个小球：
.loader::before,
.loader::after{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:white;
border-radius:50%;
bottom:1em;
}
.loader::before{
left:0;
}
.loader::after{
left:6em;
}
增加让小球向上运动的动画效果：
.loader::before,
.loader::after{
animation:climbing5sinfinite;
visibility:hidden;
}
.loader::after{
animation-delay:2.5s;
}
@keyframesclimbing{
0%{
bottom:1em;
visibility:visible;
}
10%{
bottom:2em;
}
20%{
bottom:3em;
}
30%{
bottom:4em;
}
40%{
bottom:5em;
}
50%{
bottom:1em;
}
50%,100%{
visibility:hidden;
}
}
在向上运动的同时向两侧运动，形成上台阶的动画效果：
.loader::before{
--direction:1;
}
.loader::after{
--direction:-1;
}
@keyframesclimbing{
0%{
bottom:1em;
left:calc(3em-2*1.5em*var(--direction));
visibility:visible;
}
10%{
bottom:2em;
left:calc(3em-1*1.5em*var(--direction));
}
20%{
bottom:3em;
left:calc(3em-0*1.5em*var(--direction));
}
30%{
bottom:4em;
left:calc(3em+1*1.5em*var(--direction));
}
40%{
bottom:5em;
left:calc(3em+2*1.5em*var(--direction));
}
50%{
bottom:1em;
left:calc(3em+2*1.5em*var(--direction));
}
50%,100%{
visibility:hidden;
}
}
最后，为上台阶的动作增加拟人效果：
@keyframesclimbing{
0%{
bottom:1em;
left:calc(3em-2*1.5em*var(--direction));
visibility:visible;
}
7%{
bottom:calc(2em+0.3em);
}
10%{
bottom:2em;
left:calc(3em-1*1.5em*var(--direction));
}
17%{
bottom:calc(3em+0.3em);
}
20%{
bottom:3em;
left:calc(3em-0*1.5em*var(--direction));
}
27%{
bottom:calc(4em+0.3em);
}
30%{
bottom:4em;
left:calc(3em+1*1.5em*var(--direction));
}
37%{
bottom:calc(5em+0.3em);
}
40%{
bottom:5em;
left:calc(3em+2*1.5em*var(--direction));
}
50%{
bottom:1em;
left:calc(3em+2*1.5em*var(--direction));
}
50%,100%{
visibility:hidden;
}
}
关于“怎么用纯CSS实现小球跳跃台阶的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
网页标题：怎么用纯CSS实现小球跳跃台阶的动画效果
URL分享：http://cqcxhl.com/article/jjpipe.html