iT邦幫忙

2025 iThome 鐵人賽

DAY 23
1
Modern Web

關於那些有趣的 CSS 效果系列 第 23

( Day 23 ) 純 CSS 流動色彩文字

  • 分享至 

  • xImage
  •  

從小到大三國演義看過 N 次,三國無雙也玩過 N 次,只要看到小喬,我總會想起「小橋流水唏哩哩」這句話??為了小喬和周瑜,也為了萌萌!我決定做個純 CSS 流動色彩而且很萌的動畫效果!這也是我之前練習 CSS 漸層色動畫時,就一直很想實現的文字特效,今天終於在小喬的幫忙下完成了!

純 CSS 流動色彩文字

正文開始

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

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

CSS 教學 - CSS 流動色彩文字

製作漸層色文字

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

<!-- 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>

CSS 教學 - CSS 流動色彩文字 - 製作漸層色文字

使用 hue-rotate() 改變色相

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

<!-- 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>

CSS 教學 - CSS 流動色彩文字 - 使用 hue-rotate() 製作流動色彩文字

使用 @property 自訂屬性

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

<!-- 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 教學 - CSS 流動色彩文字 - 使用 @property 自訂屬性製作流動色彩文字

小結

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


上一篇
( Day 22 ) 純也不純的 CSS 探照燈動畫 ( CSS Spotlight )
下一篇
( Day 24 ) 純 CSS 漸層色文字、雙色文字、圖片背景文字
系列文
關於那些有趣的 CSS 效果35
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言