乐趣区

关于前端:纯CSS实现四种方式文本反差色效果

jiezi

如上图所示，文字随着界面的交互变动会批改文字的色彩造成反差色，让平平无奇的文字产生了眼前一亮的成果。如果你关注设计和动画成果，这样的成果必定见过不少，在一些比拟重视设计的网站都有相似的交互成果呈现。本文将具体解读有哪些计划能够实现文本反差色成果。

动画成果一

文字蓝色背景色彩从左往右延长至整个元素，文字背景色彩随同着背景色彩笼罩过程中产生色彩的变动，且两段文字有着不同的色彩。

实现过程

如图所示两个色彩的背景是两个元素，一个绿色盒子，一个蓝色盒子，其中绿色盒子应用定位的层级 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

退出移动版