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

发布时间:2022-08-19 13:37

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号