前端日常实践：114#视频演示如何用纯CSS和混色方式制作加载器动画
时间：2023-04-05 18:13:33
HTML5
效果预览。按右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/MqYroW互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/c2qZyUV源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，只有1个元素：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；background-color:lightyellow;}定义容器的大小：.loader{width:30em;高度：3em；font-size:10px;}使用伪元素绘制2个圆角矩形，每个占容器宽度的一半，分别放置在容器的左右两侧Colorbothends:.loader{position:relative;}.loader::before,.loader::after{内容：'';位置：绝对；宽度：50%；身高：继承；border-radius:1em;}.loader::before{left:0;背景色：dodgerblue;}.loader::after{right:0;background-color:hotpink;}添加'loading'文本到圆角矩形：.loader::before,.loader::after{content:'loading';字体大小：2.5em；白颜色;文本对齐：居中；line-height:1em;}添加动画效果:.loader::before,.loader::after{animation:5smoveease-in-outinfinite;}@keyframes移动{50%{transform:translateX(100%);}}为两个圆角矩形设置移动方向变量，使它们相对移动：.loader::before{--direction:1;}.loader::after{--direction:-1;}@keyframes移动{50%{变换：translateX(calc(100%*var(--direction)));}}最后，设置混色模式，使两个矩形相交的部分不覆盖而是重叠颜色：.loader::before,.loader::after{mix-blend-mode:multiply;}和你'重做！
