怎么用纯CSS实现小球跳跃台阶的动画效果

这篇文章将为大家详细讲解有关怎么用纯CSS实现小球跳跃台阶的动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　代码解读

　　定义dom，容器中包含5个元素，代表5个台阶：

　　<divclass="loader">

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　<span></span>

　　</div>

　　居中显示：

　　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实现小球跳跃台阶的动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。