純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="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）