前端日常实践：25#视频演示如何用纯CSS制作彗星尾随效果的loader动画
时间：2023-04-05 21:00:43
HTML5
效果预览点击右侧“点击预览”按钮在当前页面进行预览，点击链接即可全屏预览。https://codepen.io/comehop??e/pen/YLRLaM交互式视频教程本视频是交互式的，您可以随时暂停视频并编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cGynQUa源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，搭建3层容器：
居中显示：html,body,.loader{height:100%;显示：弹性；对齐项目：居中；证明内容：居中；background-color:black;}定义容器尺寸：.loader{width:200px;高度：200px；位置：相对；}.loader.face{位置：绝对；宽度：100%；高度：100%；边框：2px纯白色；border-radius:50%;}画一个半圆：.loader.face{--color:gold;边框顶部颜色：var(--color)；border-left-color:var(--color);}绘制圆弧的端点：.loader.face.circle{position:absolute;顶部：50%；左：50%；宽度：50%；高度：1px；背景色：白色；变换原点：左；变换：旋转（-45度）；}.loader.face.circle::before{位置：ab溶质;顶部：-5px；右：-5px；内容：'';背景色：var(--color)；宽度：10px；高度：10px；border-radius:50%;}给端点添加光晕效果：.loader.face.circle::before{box-shadow:0020pxvar(--color),0040pxvar(--color),0060pxvar(--color),0080pxvar(--color),00100pxvar(--color),0005pxrgba(255,255,0,0.1);}隐藏辅助线：.loader.face{border:2pxsolidtransparent;}.loader.face.circle{background-color:transparent;}在dom中添加另一个圆弧：
