故障文字效果

这篇教学会介绍两种制作故障文字效果的 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 的故障文字效果其实并不困难，基本上只要新增出红色和蓝色两种重复文字，搭配错位和动画，就都可以做出满逼真的故障文字效果。

意见反馈