如上图所示，文字随着界面的交互变动会批改文字的色彩造成反差色，让平平无奇的文字产生了眼前一亮的成果。如果你关注设计和动画成果，这样的成果必定见过不少，在一些比拟重视设计的网站都有相似的交互成果呈现。本文将具体解读有哪些计划能够实现文本反差色成果。
动画成果一
文字蓝色背景色彩从左往右延长至整个元素，文字背景色彩随同着背景色彩笼罩过程中产生色彩的变动，且两段文字有着不同的色彩。
实现过程
如图所示两个色彩的背景是两个元素，一个绿色盒子，一个蓝色盒子，其中绿色盒子应用定位的层级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