Joker Chor

神奇的 CSS，让文字智能适配背景颜色
2024年8月21日·12 次阅读

混合模式 mix-blend-mode: difference

CSS3 新增了一个很有意思的属性 — mix-blend-mode ，其中 mix 和 blend 的中文意译均为混合，那么这个属性的作用直译过来就是混合混合模式，当然，我们我们通常称之为混合模式。

<div></div>

div {
    height: 100vh;
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);


&amp;::before {
    content: "LOREM IPSUM";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    mix-blend-mode: difference;
    animation: move 3s infinite linear alternate;
}



}
@keyframes move {
    0% {
        transform: translate(-30%, -50%);
    }
    100% {
        transform: translate(-70%, -50%);
    }
}

> cd ..