代码解读

 

　　定义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;

 

　　}

 

　　}







本文转载自中文网