纯CSS实现四种方式文本反差色效果

莫问天涯路几重，轻衫侧帽且从容。这篇文章主要讲述纯CSS实现四种方式文本反差色效果相关的知识，希望能为你提供帮助。

文章图片

如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。
动画效果一
文字蓝色背景颜色从左往右延伸至整个元素，文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化，且两段文字有着不同的颜色。

文章图片

实现过程如图所示两个颜色的背景是两个元素，一个绿色盒子，一个蓝色盒子，其中绿色盒子使用定位的层级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="http://img.readke.com/220712/11514950Z-3.jpg"/> < 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/7117913609337831455
动画效果三
按钮的鼠标悬停动画效果，悬停时，按钮背景区域从左往右出现黑色背景，且黑色背景内的文字颜色从默认的黑色变更为白色，形成反差色。这种效果主要借助于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, #00040%, #fff 0 60%, #0000) 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/7118274756322787341
动画效果四
此效果类似效果一，文本在两个不同的背景颜色中移动，文字产生反差色效果

文章图片

实现过程该效果看似和效果一类似，但是代码实现大不一样，不再需要创建多个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/7118362939152662535
总结
本文列举了CSS中文字形成反差色的几种效果及不同的实现方式，每种方式都有对应的优缺点，有实际的业务使用场景需多加参考选择最合适的方案使用。如效果一对颜色的使用很灵活，但是需要创建重复的DOM，而效果四代码简洁明了，但是遇到非黑白色时需要斟酌使用。现代的CSS十分强大，除此之外如果你有其他的方案欢迎留言交流。看到最后如果觉得有用，记得点个赞收藏起来，说不定哪天就用上啦。
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
参考链接
Super Header Slider
css-hover-effects-background-masks-3d
神奇的 CSS，让文字智能适配背景颜色

【纯CSS实现四种方式文本反差色效果】mozilla-clip-path