CSS 故障文字效果

這篇教學會介紹兩種製作故障文字效果的 CSS 方法，分別是使用「文字多重陰影」和「使用 clip-path」，透過紅色藍色的重複文字以及些微的錯位，實現逼真的故障文字效果。

快速導覽：

• 使用文字多重陰影和模糊製作故障文字
• 使用 clip-path 製作故障文字

使用文字多重陰影和模糊製作故障文字

故障文字的效果通常都會使用偏藍和偏紅兩種顏色的文字，透過位置錯動的方式在正常文字旁跳動，實現一種不舒服的視覺感受，為了實現這種效果，可以將文字套用不同顏色的多重陰影以及進行位置變化，就能產生故障文字，如果搭配動畫並加入些微「模糊」濾鏡，就能產生更為逼真的動態故障文字。

參考：text-shadow 文字陰影、CSS 動畫

線上展示：hhttps://codepen.io/oxxo/pen/xbxQxLQ

<!-- HTML 程式碼 -->
<h1>OXXO</h1>
<h1 class="a">OXXO</h1>

<!-- CSS 程式碼 -->
<style>
  body {background: #333;}
  h1 {
    position: relative; /* 可使用 top 和 left */
    width: max-content;
    margin: 50px auto;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    color: #fff;
    font-size: 120px;
    line-height: 1;
    text-shadow: #06f 5px 5px 0, #f09 -5px -5px 0; /* 兩種顏色的文字陰影 */
  }
  .a { animation: oxxo .3s infinite linear;} /* 套用動畫效果 */

  /* 動畫效果讓位置和陰影位置發生些微變化 */
  @keyframes oxxo {
    0%, 100% {
      top: 0;
      left: 0;
      text-shadow: #06f 5px 5px 0, #f09 -5px -5px 0;
    }
    20% {
      top: -2px;
      left: -1px;
      text-shadow: #06f 2px 2px 2px, #f09 -2px -2px 0;
    }
    40% {
      filter: blur(2px);
      top: 1px;
      left: -2px;
      text-shadow: #06f -2px -2px 0, #f09 2px 2px 0;
    }
    60% {
      filter: blur(0); /* 加入些微模糊效果 */
      top: 2px;
      left: 1px;
      text-shadow: #06f 5px -5px 0, #f09 5px 5px 2px; /* 加入些微模糊效果 */
    }
    80% {
      top: -1px;
      left: -2px;
      text-shadow: #06f -2px -2px 3px, #f09 2px -2px 0;
    }
  }
</style>

使用 clip-path 製作故障文字

除了使用多重陰影和位置製作故障文字，也可以運用虛擬元素和 clip-path 裁切路徑的方式，製作出文字的部分區域發生顏色錯位的效果，下翻範例會將虛擬元素套用 clip-path，使其發生不同時間差的錯位狀況。

參考：CSS 裁切路徑 clip-path、虛擬元素選擇器 ( 偽元素 )

線上展示：https://codepen.io/oxxo/pen/VYwVwzJ

<!-- HTML 程式碼 -->
<h1 text="OXXO">OXXO</h1>

<!-- CSS 程式碼 -->
<style>
  body {background: #333;}
  h1 {
    position: relative; /* 讓虛擬元素定位參考 */
    width: max-content;
    margin: 50px auto;
    font-size: 120px;
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    color: #fff;
  }
  h1::before, h1::after {
    position: absolute;  /* 虛擬元素絕對定位 */
    content: attr(text); /* 虛擬元素顯示內容 */
    top: 0;
    left: 0;
  }
  h1::before {
    left: -2px;                       /* 左方錯位 */
    text-shadow: #f09 3px 0px 0;       /* 紅色陰影 */
    clip-path: rect(0 100% 30% 0);     /* 長方形裁切 */
    animation: oxxo1 .3s infinite linear; /* 套用動畫 */
  }
  h1::after {
    left: 1px;                         /* 左方錯位 */
    text-shadow: #06f -3px 0px 0;      /* 藍色陰影 */
    clip-path: rect(70% 100% 100% 0);  /* 長方形裁切 */
    animation: oxxo2 .8s infinite linear; /* 套用動畫 */
  }
  /* 裁切方形往下移動 */
  @keyframes oxxo1 {
    0%, 100% {clip-path: rect(0 100% 30% 0);}
    50% {clip-path: rect(70% 100% 100% 0);}
  }
  /* 裁切長方形往上移動 */
  @keyframes oxxo2 {
    0%, 100% {clip-path: rect(70% 100% 100% 0);}
    50% {clip-path: rect(0 100% 30% 0);}
  }
</style>

小結

CSS 的故障文字效果其實並不困難，基本上只要新增出紅色和藍色兩種重複文字，搭配錯位和動畫，就都可以做出滿逼真的故障文字效果。

意見回饋

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