怎么用纯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://pwwzsj.com/article/jjpipe.html

其他资讯