本篇文章给大家带来的内容是关于如何使用css和混色模式实现loader动画效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom，只有 1 个元素：
<div class="loader"></div>
居中显示：
body {    margin: 0;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background-color: lightyellow;}
定义容器尺寸：
.loader {    width: 30em;    height: 3em;    font-size: 10px;}
用伪元素画出2个圆角矩形，各占容器的一半宽，放置在容器的左右两端，分别上色：
.loader {    position: relative;}.loader::before,.loader::after {    content: '';    position: absolute;    width: 50%;    height: inherit;    border-radius: 1em;}.loader::before {    left: 0;    background-color: dodgerblue;}.loader::after {    right: 0;    background-color: hotpink;}
为圆角矩形增加 'loading' 文本：
.loader::before,.loader::after {    content: 'loading';    font-size: 2.5em;    color: white;    text-align: center;    line-height: 1em;}
增加动画效果：
.loader::before,.loader::after {    animation: 5s move ease-in-out infinite;}@keyframes move {    50% {        transform: translatex(100%);    }}
为两个圆角矩形分别设置运动方向变量，使它们相对移动：
.loader::before {    --direction: 1;}.loader::after {    --direction: -1;}@keyframes move {    50% {        transform: translatex(calc(100% * var(--direction)));    }}
最后，设置混色模式，使两个矩形相交的部分不是覆盖而是使颜色重叠：
.loader::before,.loader::after {    mix-blend-mode: multiply;}
大功告成！
相关推荐：
如何用css实现一只带帽子的大熊猫（附代码）
如何使用纯css实现切换按钮时背景的悬停动画效果
以上就是如何使用css和混色模式实现loader动画效果（附代码）的详细内容。