iT邦幫忙

2025 iThome 鐵人賽

DAY 30
1
Modern Web

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

( Day 30 ) 純 CSS 故障文字效果

  • 分享至 

  • xImage
  •  

雖然阿諾很老了,但他的魔鬼終結者仍然是經典中的經典!每次想到他被液態金屬人插爆的當下,眼中竟然還是充滿著愛意,就讓我不禁想要用純純的 CSS 做出類似的效果... 突然發現今天是第 30 天,這表示我已經挑戰完成,但路其實還很長,我還有四到五篇要寫,就像魔鬼終結者一樣,拍了又拍,拍了又拍...

純 CSS 故障文字效果

正文開始

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

CSS 教學 - CSS 故障文字效果

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

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

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

CSS 教學 - CSS 故障文字效果 - 使用文字陰影和模糊製作故障文字

使用 clip-path 製作故障文字 {a2}

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

html >>>>
<!-- 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 教學 - CSS 故障文字效果 - 使用 clip-path 製作故障文字

小結

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


上一篇
( Day 29 ) 純 CSS ICON 圖示形狀變換
下一篇
( Day 31 ) 純 CSS 的多種按鈕 hover 效果
系列文
關於那些有趣的 CSS 效果34
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言