文字和背景反色效果

CSS代码：

body {
    background: #000;
}
.box {
    position: absolute;
    overflow: hidden;
    isolation: isolate;
}
h1 {
    margin: 0;
    mix-blend-mode: difference;
    font-size: 300%;
    color: #fff;
    position: relative;
    z-index: 1;
}
.box::before {
    content: '';
    position: absolute;
    width: 100vw; height: 100vw;
    left: calc(50% - 50vw); top: calc(50% - 50vw);
    margin: auto;
    background: linear-gradient(#fff 50%, #000 50%);
    animation: spin 5s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   {  transform: rotate(360deg); }
}

HTML代码：

<div class="box">
    <h1>第4届前端开发者千人峰会</h1>
</div>