前端日常实践：97#视频演示如何用纯CSS制作一组招摇的点
时间：2023-03-30 23:42:03
CSS
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/ejrMKe互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/caw7yTv源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含5个元素，每个元素代表一个小球：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(circleatcenter,sienna,maroon);}定义容器尺寸：.loader{width:6em;高度：1em；font-size:40px;}画点:.loader{position:relative;}.loaderspan{position:absolute;宽度：1em；高度：1em；背景色：白色；边界半径：50%；left:5em;}定义小球从右向左移动和从左向右返回的动画效果：.loader{--duration:5s;}.loaderspan{动画：线性无限行走；动画持续时间：var(--duration);}@keyframeswalk{0%,95%,100%{l离开：5em；}80%,85%{左:0;}}添加小球在左端向上跳跃，在右端落下的动画效果：.loaderspan{animation:walklinearinfinite,jumplinearinfinite;}@keyframesjump{80%,100%{top:0;}85%,95%{顶部:-1em;}}当小球从左向右返回时，由于快速运动略微压扁的效果：.loaderspan{动画：行走线性无限，跳跃线性无限，挤压线性无限;}@keyframessquash{80%,100%{宽度：1em；高度：1em；}90%{宽度：2em；高度：0.8em；}}为5个球中的每一个定义变量：.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;}声明球的数量：.loader{--dots:5;}设置动画延迟：.loaderspan{animation-delay:calc(var(--n)*var(--duration)/var(--dots)*-1);}最后，缩小点：.loader{font-size:20px;}大功告成！
