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

 

如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现。本文将详细解读有哪些方案可以实现文本反差色效果。

动画效果一

文字蓝色背景颜色从左往右延伸至整个元素，文字背景颜色伴随着背景颜色覆盖过程中发生颜色的变化，且两段文字有着不同的颜色。

实现过程

如图所示两个颜色的背景是两个元素，一个绿色盒子，一个蓝色盒子，其中绿色盒子使用定位的层级z-index高于蓝色盒子；通过改变蓝色盒子的宽度覆盖绿色盒子；盒子里面的文字内容宽度固定，否则两段文本不能刚好重叠。

核心代码如下：

  
    前端开发
    南城FE      
  

       前端开发     南城FE       

.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()裁剪矩形，同理其他的形状也是可以的。

核心代码如下：

  
    南 城 F E

  

            南 城 F E