前端日常实战：71#视频演示如何使用纯CSS制作loader
时间：2023-04-02 23:24:50
HTML
跳舞图8舞蹈效果预览点击右侧“点击预览”按钮可在当前页面进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/gKNMMm互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cd339Ur源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含5个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:goldenrod;}定义容器大小:.loader{width:8em;高度：8em；font-size:30px;}画点:.loaderspan{position:absolute;顶部：4em；宽度：1em；高度：1em；背景色：#222；border-radius:50%;}定义动画效果：.loaderspan{transform-origin:4emtop;动画：跳舞1s线性无限；}@keyframes跳舞{到{}}最后，为每个点添加动画延迟：.loaderspan{animation-delay:calc((var(--n)-5)*0.1s);}.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;}大功告成！
