前端日常实战：84#视频演示如何用纯CSS制作极品飞车loader
时间：2023-03-31 01:40:19
CSS
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/MBbEMo互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cWLg8hV源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含7个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(midnightblue,black);}绘制7个正方形：.loader{width:calc(1em*7+0.15em*6);高度：1.5em；字体大小：20px；显示：弹性；证明-content:space-between;}.loaderspan{width:1em;背景颜色：深天蓝；border-radius:0.1em;}倾斜块：.loaderspan{transform:skewX(-25deg);}定义闪烁动画效果：.loaderspan{animation:animate0.8sinfinitealternate;过滤器：不透明度（0）；}@keyframes动画{到{过滤器：不透明度（1）；}}定义变量并设置动画延迟，使效果看起来像一个黑色块从左向右移动：.loaderspan{animation-delay:calc((var(--n)-1)*0.2s);}.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:nth-child(6){--n:6;}.loaderspan:nth-child(7){--n:7;}最后增加色块缩放效果：.loaderspan{transform:skewX(-25deg)scale(0.1);}@keyframes动画{到{过滤器：不透明度(1);变换：skewX（-25deg）比例（1）；}}你完成了！
