前端日常实战：42#视频演示如何用纯CSS制作均衡器加载器动画
时间：2023-04-02 16:40:50
HTML
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/oybWByInteractive视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cG64puy源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含5个子元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义均衡器的样式：.equalizer{width:10em;高度：10em；显示：弹性；证明内容：空间之间；}。均衡器跨度{宽度：1.5em；background:linear-gradient(0deg,green,yellow,red);}定义均衡器竖条动画效果：.equalizerspan{animation:up-and-down2slinearinfinite;}@keyframesup-and-down{0%,100%{剪辑路径：插图（27%000）；}10%{剪辑路径：插图（17%000）；}20%{剪辑路径：插图（55%000）；}30%{剪辑路径：在设置（30%000）；}40%{剪辑路径：插图（13%000）；}50%{剪辑路径：插图（38%000）；}60%{剪辑路径：插图（80%000）；}70%{剪辑路径：插图（21%000）；}80%{剪辑路径：插图（0%000）；}90%{剪辑路径：插图（36%000）；}}最后依次设置每个竖条的动画：.equalizerspan{animation:up-and-down2slinearinfinitecalc(-1*0.4s*(var(--n)-1));}。均衡器跨度：nth-??child(1){--n:1;}.equalizerspan:nth-child(2){--n:2;}.??equalizerspan:nth-child(3){--n:3;}.equalizerspan:nth-child(4){--n:4;}.equalizerspan:nth-child(5){--n:5;}大功告成！
