前端日常实战：45#视频演示如何用纯CSS制作菱形loader动画
时间：2023-04-02 12:58:48
HTML
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/eKzjqK互动视频教程本视频是互动式的，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c8eyJUE源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，一个容器包含9个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器和子元素大小，即一个大方格包含9个小方格：.loader{width:10em;高度：10em；显示：网格；网格模板列：重复（3、1fr）；grid-gap:0.5em;}调整图案为大菱形包含9个小菱形：.loader{transform:rotate(45deg);}以垂直方向的小菱形为单位给小菱形块上色:.loaderspan{background-color:var(--c);}.loaderspan:nth-child(7){--c:tomato;}.loaderspan:nth-child(4),.loaderspan:第n个孩子(8){--c:金;}.loaderspan:nth-child(1),.loaderspan:nth-child(5),.loaderspan:nth-child(9){--c:limegreen;}.loaderspan:nth-child(2),.loaderspan:nth-child(6){--c:dodgerblue;}.loaderspan:nth-child(3){--c:mediopurple;}确定动画效果：.loaderspan{animation:闪烁2s线性无限；动画延迟：var(--d)；变换：缩放（0）；}@keyframes闪烁{0%，100%{变换：缩放（0）；}40%,80%{转换：比例（1）；}}最后，为小菱形设置延时，增强动作：.loaderspan:nth-child(7){--d:0s;}.loaderspan:nth-child(4),.loaderspan:nth-child(8){--d:0.2s;}.loaderspan:nth-child(1),.loaderspan:nth-child(5),.loaderspan:nth-child(9){--d:0.4s;}.loaderspan:nth-child(2),.loaderspan:nth-child(6){--d:0.6s;}.loaderspan:nth-child(3){--d:0.8s;}伟大的成就！
