前端日常实践：65#视频演示了如何用纯CSS制作一个摇摇欲坠的loader
时间：2023-03-30 19:20:12
CSS
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/oyJvpe互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cqwpQh7源码下载每日前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含子元素，子元素为文本：Loading...
居中显示：body{margin:0;身高：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.loader{width:10em;高度：10em；字体大小：30px；box-sizing:border-box;}设置文本样式:.loaderspan{position:absolute;白颜色;宽度：继承；身高：继承；文本对齐：居中；行高：10em；font-family:sans-serif;}draw绘制圆的顶部弧线：.loader{border-top:0.3emsolidhotpink;border-radius:50%;}用伪元素绘制圆的其他2个圆弧：.loader{position:relative;}.loader::before,.loader::after{content:'';位置：绝对；宽度：继承；身高：继承；边界半径：50%；框大小：边框框；顶部：-0.2em；}.loader::之前{border-top:0.3emsoliddodgerblue;transform:rotate(120deg);}.loader::after{border-top:0.3emsolidgold;transform:rotate(240deg);}定义动画效果：@keyframesrotating{50%{transform:rotate(calc(180deg*var(--direction)));}100%{变换：旋转（计算（360deg*var（--direction）））;}}应用动画效果到圆圈：.loader{animation:rotating2sease-in-outinfinite;--direction:1;}将动画应用于文本：.loaderspan{animation:rotating2slinearinfinite;--direction:-1;}最后，隐藏可能溢出窗口的内容：body{overflow:hidden;}就大功告成了！
