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

纯CSS实现四种方式文本反差色效果_第1张图片

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

动画效果一

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

纯CSS实现四种方式文本反差色效果_第2张图片

实现过程

如图所示两个颜色的背景是两个元素,一个绿色盒子,一个蓝色盒子,其中绿色盒子使用定位的层级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的加载速度,改成了灰色背景。图片变大的同时,文字在逐渐变小,且逐渐融入到盒子的内部,文字颜色从在盒子外部的黑色变更成为盒子内部的白色,形成文字反差色效果。
纯CSS实现四种方式文本反差色效果_第3张图片

实现过程

此效果相比较本文动画效果一更为复杂,不再只是由一个维度的变化形成反差色,而是多个维度同时在变化。大体原理和效果一相差不大,略微有些区别。

  • 整体还是两个盒子,中间灰色区域的元素层级z-index高于纯文本元素
  • 两个元素中的文本内容尺寸大小固定不变
  • 灰色元素使用clip-path裁剪元素背景,该属性可以裁剪多种图形,示例中使用inset()裁剪矩形,同理其他的形状也是可以的。

核心代码如下:

南 城 F E
南 城 F E
.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-前缀支持。

纯CSS实现四种方式文本反差色效果_第4张图片

实现过程

类似形成反差色的悬停动画效果种类还有很多,如背景动画的运动方向不同,或者将背景区域分成多个区域进行不同的动画等。先不考虑动画的情况下,先看以下图片分析代码实现。

纯CSS实现四种方式文本反差色效果_第5张图片

  • 背景黑色区域文字颜色形成反差,设置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...

动画效果四

此效果类似效果一,文本在两个不同的背景颜色中移动,文字产生反差色效果

纯CSS实现四种方式文本反差色效果_第6张图片

实现过程

该效果看似和效果一类似,但是代码实现大不一样,不再需要创建多个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

你可能感兴趣的