前端日常实战：67#视频演示如何使用纯CSS制作单元素格子加载器
时间：2023-04-02 22:12:09
HTML
效果预览在当前页面点击右侧“点击预览”按钮进行预览，点击链接进行预览全屏显示。https://codepen.io/comehop??e/pen/YvBvBr互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cwE7NCm源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:radial-gradient(darkgreen30%,forestgreen);}定义容器尺寸：.loader{width:10em;高度：10em；font-size:20px;}使用box-shadow绘制2组点阵：.loader::before,.loader::after{content:'';位置：绝对；宽度：1em；高度：1em；背景颜色：currentColor；框阴影：00、2em0、4em0、6em0、02em、2em2em、4em2em、6em2em、04em、2em4em、4em4em、6em4em、06em、2em6em、4em6em、6em6em;border-radius:50%;}.loader::before{color:gold;}.loader::after{color:dodgerblue;}定义动画：@keyframesround{0%{transform:translateX(0)translateY(0);}25%{变换:翻译X(3em)翻译Y(0);}50%{转换：translateX(3em)translateY(3em);}75%{转换：translateX(0)translateY(3em);}}最后给点加上动画效果就行了：.loader::before,.loader::after{animation:round2seaseinfinite;}.loader::after{animation-delay:-1s;}你'重做！
