共计 3658 个字符，预计需要花费 10 分钟才能阅读完成。
如上图所示，文字随着界面的交互变动会批改文字的色彩造成反差色，让平平无奇的文字产生了眼前一亮的成果。如果你关注设计和动画成果，这样的成果必定见过不少，在一些比拟重视设计的网站都有相似的交互成果呈现。本文将具体解读有哪些计划能够实现文本反差色成果。
动画成果一
文字蓝色背景色彩从左往右延长至整个元素，文字背景色彩随同着背景色彩笼罩过程中产生色彩的变动，且两段文字有着不同的色彩。
实现过程
如图所示两个色彩的背景是两个元素，一个绿色盒子，一个蓝色盒子，其中绿色盒子应用定位的层级 z-index 高于蓝色盒子；通过扭转蓝色盒子的宽度笼罩绿色盒子；盒子外面的文字内容宽度固定，否则两段文本不能刚好重叠。
外围代码如下：
<div id="left-side" class="side">
<h2 class="title">
前端开发
<span class="fancy"> 南城 FE</span>
</h2>
</div>
<div id="right-side" class="side">
<h2 class="title">
前端开发
<span class="fancy"> 南城 FE</span>
</h2>
</div>.side {
display: grid;
height: 100vh;
overflow: hidden;
place-items: center;
position: absolute;
width: 100%;
}
.side .title {
font-size: 2vw;
margin: 0px 10vw;
text-align: center;
width: 80vw;
}
#left-side {
width: 50%;
z-index: 2;
}动画成果二
随着页面的滚动，灰色区域逐步变大，原成果出处灰色区域是一张图片，为了 GIF 的加载速度，改成了灰色背景。图片变大的同时，文字在逐步变小，且逐步融入到盒子的外部，文字色彩从在盒子内部的彩色变更成为盒子外部的红色，造成文字反差色成果。
实现过程
此成果相比拟本文动画成果一更为简单，不再只是由一个维度的变动造成反差色，而是多个维度同时在变动。大体原理和成果一相差不大，稍微有些区别。
- 整体还是两个盒子，两头灰色区域的元素层级
z-index高于纯文本元素 - 两个元素中的文本内容尺寸大小固定不变
- 灰色元素应用
clip-path裁剪元素背景，该属性能够裁剪多种图形，示例中应用inset()裁剪矩形，同理其余的形态也是能够的。
外围代码如下：
<div class="out">
<div class="warpper">
<div class="text-wrapper"> 南 城 F E</div>
</div>
<div class="bg-wrapper">
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dae42da0ace3424d84b3bdc58c922296~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"/>
<div class="text-wrapper"> 南 城 F E</div>
</div>
</div>.out {position: relative;}
.warpper {position: absolute;}
.bg-wrapper {
position: absolute;
z-index: 0;
animation: run 2s infinite alternate-reverse;
}
@keyframes run {
0% {clip-path: inset(47.5px 150px);
}
100% {clip-path: inset(147.5px 350px);
}
}源码在线预览：
https://code.juejin.cn/pen/71…
动画成果三
按钮的鼠标悬停动画成果，悬停时，按钮背景区域从左往右呈现彩色背景，且彩色背景内的文字色彩从默认的彩色变更为红色，造成反差色。这种成果次要借助于 background-clip: text，该属性次要的性能是将背景裁剪成文字的前景色，该属性目前还不是所有浏览器都齐全反对，谷歌浏览器还须要设置-webkit- 前缀反对。
实现过程
相似造成反差色的悬停动画成果品种还有很多，如背景动画的静止方向不同，或者将背景区域分成多个区域进行不同的动画等。先不思考动画的状况下，先看以下图片剖析代码实现。
- 背景彩色区域文字色彩造成反差，设置
background-clip: text, padding-box; - 背景彩色区域呈平行四边形，其实就是失常的彩色矩形被旋转角度了，只不过这里因为彩色背景之外的成果还是失常的，所以这个被旋转的背景是由红色彩色红色多段色彩组成，这里应用
linear-gradient实现，须要次要的是这里应用了background-clip: text，所以最终的背景色值是体现在文字的色彩上 - 设置
background-position让彩色背景区域在元素可视区之外，hover时再扭转background-position即可产生动画成果
外围代码如下：
.inverted-8 {
background:
linear-gradient(-45deg, #000 40%, #fff 0 60%, #000 0) right/300% 100% no-repeat,
linear-gradient(-45deg, #0000 40%, #000 0 60%, #0000 0) right/300% 100% no-repeat;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
}
.inverted-8:hover {
background-position: left;
transition: 0.8s
}多种悬停成果源码在线预览：
https://code.juejin.cn/pen/71…
动画成果四
此成果相似成果一，文本在两个不同的背景色彩中挪动，文字产生反差色成果
实现过程
该成果看似和成果一相似，然而代码实现大不一样，不再须要创立多个 DOM 元素，背景色彩应用 linear-gradient 突变生成。文本元素应用 mix-blend-mode: difference，就可实现反差色的成果。看着是不是太简略了，次要就是用到了mix-blend-mode，通常称之为混合模式，而difference 意为差值模式，该模式下会查看每个通道中的色彩信息，比拟底色和绘图色，用较亮的像素点的像素值减去较暗的像素点的像素值。因为彩色的亮度值为 0，红色的亮度值为 255，因而用彩色着色不会产生任何影响，用红色着色则产生被着色的原始像素色彩的反相。
外围代码如下：
div {
height: 100vh;
font-size: 30px;
background: linear-gradient(90deg, rgb(0, 0, 0) 50%, #fff 50%);
display: flex;
justify-content: center;
align-items: center;
span {
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
animation: move 2s infinite linear alternate;
mix-blend-mode: difference;
}
}
@keyframes move {
0% {transform: translate(-30%, -50%);
}
100% {transform: translate(-70%, -50%);
}
}
纯色模式下黑红色的反差成果是最好的，因为其反差色彩是主动生成的，不能像成果一齐全自定义 CSS 色彩，如果是其余的色彩在理论应用的时候还是须要多加取舍。但如果是在图片背景中利用此模式的成果绝对不错，因为会主动计算反差色，在遇到不同的像素会造成不同的反差。
源码在线预览：
https://code.juejin.cn/pen/71…
总结
本文列举了 CSS 中文字造成反差色的几种成果及不同的实现形式，每种形式都有对应的优缺点，有理论的业务应用场景需多加参考抉择最合适的计划应用。如成果一对色彩的应用很灵便，然而须要创立反复的 DOM，而成果四代码简洁明了，然而遇到非黑红色时须要斟酌应用。古代的 CSS 非常弱小，除此之外如果你有其余的计划欢送留言交换。看到最初如果感觉有用，记得点个赞珍藏起来，说不定哪天就用上啦。
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）
参考链接
Super Header Slider
css-hover-effects-background-masks-3d
[神奇的 CSS，让文字智能适配背景色彩
](https://juejin.cn/post/707557…)
mozilla-clip-path
