css 通过混合模式文字智能适应配色

用css制作如图样式
文本在黑色底色上表现为白色，在白色底色上表现为黑色，可以在 CSS 中，利用混合模式 mix-blend-mode: difference，很简单的实现。
normal：正常、multiply：正片叠底、screen：滤色、overlay：叠加darken：变暗、lighten：变亮、color-dodge：颜色减淡、color-burn：颜色加深、hard-light：强光、soft-light：柔光、difference：差值、exclusion：排除、hue：色相、saturation：饱和度、color：颜色、luminosity：亮度、initial：初始、inherit：继承、unset：复原

其中，利用的是差值模式 mix-blend-mode: difference
就是上方图层的亮区将下方图层的颜色进行反相，暗区则将颜色正常显示出来，效果与原图像是完全相反的颜色。很适合于表现黑白色。
其中还利用到animation属性实现动画效果。

animation的语法：

animation: name （绑定到选择器的 keyframe 名称）
duration （完成动画所花费的时间，以秒或毫秒计）
timing-function （动画的速度曲线）

delay （动画开始之前的延迟）
iteration-count （动画应该播放的次数）

direction （是否应该轮流反向播放动画）

html：

<div class="text"></div>

css：

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

        &::before {
            content: "Fitone-健身助手";
            font-size: 20px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            mix-blend-mode: difference;
            animation: move 2s infinite linear alternate;
        }
    }
    @keyframes move {
        0% {
            transform: translate(-30%, -50%);
        }
        100% {
            transform: translate(-100%, -50%);
        }
    }
当然，这个方法不是满足所有场景，因为通过 mix-blend-mode:difference 与底色叠加之后的颜色，虽然能够正常展示，但是不一定是最适合的颜色，所以在实际使用的时候，在非黑白场景下，可以使用混合模式的其他属性。