CSS 流動色彩文字

這篇教學會運用漸層色文字的效果，搭配 hue-rotate() 改變色相與 @property 自訂屬性兩種方式，搭配漸層色的動畫，實作兩種有趣的流動色彩文字效果。

延伸閱讀：CSS 漸層色文字、雙色文字、圖片背景文字、CSS 漸層色的轉場與動畫

快速導覽：

• 製作漸層色文字
• 使用 hue-rotate() 改變色相
• 使用 @property 自訂屬性

製作漸層色文字

當 CSS background-clip 樣式屬性設定為 text，並將文字原本的顏色設定為「透明色」，就可以將背景裁切成內容文字的形狀，產生具有使用背景色彩的文字，下方範例會運用這種方式，產生「漸層色文字」。

• 參考：background-clip 裁切背景
• 線上展示：https://codepen.io/oxxo/pen/QwbrPNz

<!-- HTML 程式碼 -->
<div><h1>漸層色文字</h1></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;  /* 按照文字裁切背景 */
  }
  h1 {
    width: max-content;
    margin: 0;
    font-size: 80px;
    color: #0000;     /* 文字顏色設為透明 */
  }
</style>

使用 hue-rotate() 改變色相

可以製作漸層色文字後，第一種製作流動色彩文字的方式，是使用 hue-rotate() 色彩濾鏡函式，搭配 CSS 動畫不斷改變色相的角度，就能實現色彩持續變換流動的效果。

• 參考：CSS 動畫 animation、hue-rotate()
• 線上展示：https://codepen.io/oxxo/pen/dPoeLXW

<!-- HTML 程式碼 -->
<div><h1>流動色彩</h1></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: max-content;
    background: linear-gradient(to right, red, orange, yellow, green, blue, purple);
    background-clip: text;
    animation: oxxo 2s infinite linear;
  }
  h1 {
    margin: 0;
    width: max-content;
    font-size: 80px;
    color: #0000;
  }
  @keyframes oxxo {
    0% {filter: hue-rotate(0deg);}     /* 改變色相環角度 */
    100% {filter: hue-rotate(360deg);}
  }
</style>

使用 @property 自訂屬性

第二種製作流動色彩文字的方式，是使用 @property 定義一個百分比屬性，接著就能搭配 CSS 動畫不斷改變這個數值，實現漸層色的動畫，進而產生色彩持續變換流動的效果。

• 參考：CSS 漸層色的轉場與動畫
• 線上展示：https://codepen.io/oxxo/pen/jEPxRrJ

<!-- HTML 程式碼 -->
<div><h1>流動色彩</h1></div>

<!-- CSS 程式碼 -->
<style>
  @property --p {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 0%;
  }
  div {
    width: max-content;
    /* 注意漸層色使用「重複線性漸層」，位置都有加入 --p */
    background: repeating-linear-gradient(60deg, 
      red var(--p), 
      orange calc(var(--p) + 8%), 
      yellow calc(var(--p) + 16%), 
      green calc(var(--p) + 24%), 
      blue calc(var(--p) + 32%), 
      purple calc(var(--p) + 40%),
      red calc(var(--p) + 50%));
    background-clip: text;
    animation: oxxo 2s infinite linear;
  }
  h1 {
    margin: 0;
    width: max-content;
    font-size: 80px;
    color: #0000;
  }
  @keyframes oxxo {
    0% {--p: 0%;}
    100% {--p: -100%;}
  }
</style>

小結

透過 CSS 的漸層色、濾鏡、自訂屬性，就能做出有趣又吸睛的彩色文字效果，實作過也不複雜，有機會可以運用在自己的網站中。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～