前端日常实战：146#视频演示如何用纯CSS制作脉动加载器
时间：2023-04-05 17:11:12
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/wYvGwr互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cnMgQTr源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含10个子元素：
中心显示：body{保证金：0；高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background:linear-gradient(#eee70%,pink);}设置容器的样式，为粉红色背景的圆圈，描边：.loader{width:6em;高度：6em；填充：3em；字体大小：10px；背景色：粉色；边界半径：50%；border:0.8emsolidhotpink;}设置子元素的布局为水平Tiling:.loader{display:flex;对齐项目：居中；justify-content:space-between;}样式子元素：.loader>span{width:0.5em;高度：50%；background-color:deeppink;}增加子元素的动画效果:.loader>span{transform:scaleY(0.05)translateX(-0.5em);动画：span-animate1.5sinfiniteease-in-out;}@keyframesspan-animate{0%,100%{transform:scaleY(0.05)translateX(-0.5em);}15%{转换：scaleY(1.2)translateX(1em);}90%,100%{背景色:hotpink;}}设置子元素下标，让子元素依次播放动画：.loader>span{animation-delay:calc(var(--n)*0.05s);}.loader>span:nth-child(1){--n:1;}.loader>span:nth-child(2){--n:2;}.loader>span:nth-child(3){--n:3;}.loader>span:nth-child(4){--n:4;}.loader>span:nth-child(5){--n:5;}.loader>span:nth-child(6){--n:6;}.loader>span:nth-child(7){--n:7;}.loader>span:nth-child(8){--n:8;}.loader>span:nth-child(9){--n:9;}.loader>span:nth-child(10){--n:10;}添加容器动画，加强脉动效果：.loader{animation:loader-animate1.5s无限缓入缓出；}@keyframesloader-animate{45%,55%{transform:scale(1.05);}}你完成了！
