前端日常实践：83#视频演示如何用纯CSS制作一个小球上台阶的动画

居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.loader{width:7em;高度：5em；font-size:40px;}绘制5个步骤：.loader{display:flex;证明内容：空格之间；对齐项目：弹性结束；}。装载机跨度{宽度：1em;高度：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-childld(5){--n:5;}增加步长改变排序方向的动画效果:.loaderspan{animation:sort5sinfinite;}@keyframessort{0%,40%,100%{height:计??算(var(--n)*1em);}50%,90%{高度:计算(5em-(var(--n)-1)*1em);}}下面使用小球的动画，让2个同色小球的交替运动看起来像1个小球在做往复运动用伪元素绘制2个小球：.loader::before,.loader::after{content:'';位置：绝对；宽度：1em；高度：1em；背景色：白色；边界半径：50%；bottom:1em;}.loader::before{left:0;}.loader::after{left:6em;}增加小球向上移动的动画效果：.loader::before,.loader::after{animation：爬升5s无限；可见性：隐藏；}.loader::after{animation-delay:2.5s;}@keyframesclimbing{0%{bottom:1em;能见度：可见；}10%{底部：2em；20%{底部：3em;}30%{底部：4em;}40%{底部：5em;}50%{底部：1em;}50%,100%{可见性：隐藏；两侧移动形成上台阶的动画效果：.loader::before{--direction:1;}.loader::after{--direction:-1;}@keyframesclimbing{0%{bottom:1米;左：计算（3em-2*1.5em*var（--direction））；能见度：可见；}10%{底部：2em；左：calc(3em-1*1.5em*var(--direction));}20%{底部：3em；左：计算（3em-0*1.5em*var（--direction））；}30%{底部：4em;左：计算（3em+1*1.5em*var（--direction））；}40%{底部：5em;左：计算（3em+2*1.5em*var（--direction））；}50%{底部：1em;左：计算（3em+2*1.5em*var（--direction））；}50%,100%{可见性：隐藏；}}最后，为上楼梯的动作添加拟人化效果：@keyframesclimbing{0%{bottom:1em;左：calc(3em-2*1.5em*var(--direction));能见度：可见；}7%{底部：计算（2em+0.3em）；}10%{底部：2em；左：calc(3em-1*1.5em*var(--direction));}17%{底部：计算（3em+0.3em）；}20%{底部：3em；左：计算（3em-0*1.5em*var（--direction））；}27%{底部：计算（4em+0.3em）；}30%{底部米：4em；左：计算（3em+1*1.5em*var（--direction））；}37%{底部：计算（5em+0.3em）；}40%{底部：5em；左：计算（3em+2*1.5em*var（--direction））；}50%{底部：1em;左：计算（3em+2*1.5em*var（--direction））；}50%,100%{可见性：隐藏；}}大功告成！