本篇文章给大家带来的内容是关于如何使用CSS和混色模式实现loader动画效果（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
https://github.com/comehope/front-end-daily-challenges
定义 dom，只有 1 个元素：
居中显示：
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和混色模式实现loader动画效果（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
