在日月潭的文武廟前有一座年梯步道，步道階梯的每一階上刻著 365+1 天的日期以及當天出生的名人，當我氣喘吁吁爬著階梯時，心想不如用純 CSS 來處理這麼累人的階梯好了，因此就做了一個簡單的效果，讓文字自己上樓梯，就不用這麼辛苦的爬階梯找自己的生日了...

正文開始

這篇教學會使用 CSS 的文字陰影 text-shadow 和虛擬元素互相搭配，先製作出雙色文字的移動，接著套用 transform 產生 3D 變形，就能做出非常有趣的樓梯文字動態效果。

使用 text-shadow 製作雙色文字移動

CSS 製作雙色文字最常見的方式，是使用兩組具有同樣文字的元素，搭配 overflow: hidden 和文字的定位，就能將不同顏色的文字互相組合成雙色字，主要步驟如下，詳細說明可參考範例註解。

• 文字無法透過 padding 或行高移動超過元素顯示範圍，但可用 text-shadow 做出超過元素範圍的文字。
• 透過虛擬元素讀取 text 自訂屬性，自訂屬性內容是下一個元素的內容。
• 元素本身使用 text-shadow 移動內容，搭配 margin 改變虛擬元素位置。
• 當行高設定為 1 時，就可用 em 準確獲得高度，搭配 CSS 變數加入 padding 數值。

• 更多參考：text-shadow 文字陰影、虛擬元素選擇器、CSS 變數、calc() 基本數學運算
• 線上展示：https://codepen.io/oxxo/pen/emYVKyq

<!-- HTML 程式碼 -->
<ul>
  <li text="OXXO.STUDIO">HELLO WORLD</li>
  <li text="TAIWAN NO.1">OXXO.STUDIO</li>
  <li text="I LOVE TAIWAN">TAIWAN NO.1</li>
  <li text="STEAM EDUCATION">I LOVE TAIWAN</li>
  <li text="LET'S GOGOGO">STEAM EDUCATION</li>
  <li text="HELLO WORLD">LET'S GOGOGO</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  ul, li {
    margin: 0;                /* 去除 ul 和 li 預設數值 */
    padding: 0;
    list-style-type: none;    /* 隱藏 li 樣式 */
    font-size: 60px;          /* 讓 em 單位參考 */
    line-height: 1;           /* 行高等於字體大小 */
    font-family: impact, arial-black;  /* 設定成比較粗的字體 */
    box-sizing: border-box;   /* 避免 padding 數值影響尺寸 */
  }
  ul {
    width: max-content;       /* 寬度等於最大內容寬 */
  }
  li {
    position: relative;       /* 讓虛擬元素定位參考 */
    width: 100%;              /* 寬度 100% */
    padding: 5px 20px;
    border: 1px solid #000;
    overflow: hidden;         /* 超過範圍就隱藏 */
    --y: calc(1em + 15px);    /* 設定變數，計算位移的數值 */
    color: #0000;             /* 文字透明顏色 */
    text-shadow: #fff 0 0 0;  /* 文字陰影白色，由文字陰影替代文字 */
    transition: 1s;           /* 轉場時間 1s */
  }
  li::before {
    position: absolute;       /* 虛擬元素絕對定位 */
    content: attr(text);      /* 虛擬元素讀取元素 text 屬性 */    
    top: var(--y);            /* 虛擬元素定位 */
    color: #0000;             /* 虛擬元素文字透明顏色 */
    text-shadow: #f00 0 0 0;  /* 虛擬元素文字陰紅色，由文字陰影替代文字 */
    transition: 1s;           /* 虛擬元素轉場時間 1s */
  }
  li:nth-child(2n) {
    background: #f90;         /* 偶數 li 背景色 */
  }
  li:nth-child(2n+1) {
    background: #0a0;         /* 奇數 li 背景色 */
  }
  ul:hover li {
    text-shadow: #fff 0 calc(var(--y) * -1) 0;  /* hover 時文字陰影位置 */
  }
  ul:hover li::before {
    text-shadow: #f00 0 calc(var(--y) * -1) 0;  /* hover 時虛擬元素文字陰影位置 */
  }
</style>

使用 transform 製作樓梯文字動態效果

延伸範例程式碼，*在 HTML 裡使用一個類別為「camera」的 div 包覆雙色文字跑馬燈，這個 div 主要會設定 3D 變形的「攝影機視角」，*接著只要替 ul 和 li 加入各自的 3D 變形，就可以產生樓梯效果，由於翻轉之後出現「縫隙」，可以透過三角函數計算位移的數量進行位移，就能補足翻轉後產噌的縫隙。

• 參考：CSS transform 轉換函式、回傳數字的三角函數
• 線上展示：https://codepen.io/oxxo/pen/ogNEyEY

<!-- HTML 程式碼 -->
<!-- 使用 camera 包覆剛剛的 HTML -->
<div class="camera">
  <ul>
    <li text="OXXO.STUDIO">HELLO WORLD</li>
    <li text="TAIWAN NO.1">OXXO.STUDIO</li>
    <li text="I LOVE TAIWAN">TAIWAN NO.1</li>
    <li text="STEAM EDUCATION">I LOVE TAIWAN</li>
    <li text="LET'S GOGOGO">STEAM EDUCATION</li>
    <li text="HELLO WORLD">LET'S GOGOGO</li>
  </ul>
</div>

<!-- CSS 程式碼 -->
<style>
  .camera {
    margin: 100px auto;
    width: max-content;
  }
  ul, li {
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 60px;
    font-family: impact, arial-black;
    box-sizing: border-box;
    line-height: 1;
  }
  ul {
    width: max-content;
    transform-style: preserve-3d;               /* 內容同屬一個 3D 空間 */
    transform: rotateY(-30deg) rotateZ(-15deg); /* 轉換角度更有立體感 */
  }
  li {
    position: relative;
    width: 100%;
    padding: 5px 20px;
    border: 1px solid #000;
    overflow: hidden;
    --y: calc(1em + 15px);
    color: #0000;
    text-shadow: #fff 0 0 0;
    transition: 1s;
  }
  li::before {
    position: absolute;
    content: attr(text);
    top: var(--y);
    color: #0000;
    text-shadow: #fff 0 0 0;
    transition: 1s;
  }
  li:nth-child(2n) {
    margin-top: calc(-1em * cos(45deg)); /* 使用三角函數計算要移動的量 */
    background: #f90;
    transform-origin: 0 100% 0; 
    transform: rotateX(-45deg);  /* 翻轉 */
  }
  li:nth-child(2n+1) {
    background: #0a0;
    transform-origin: 0 0 0; 
    transform: rotateX(45deg);  /* 翻轉 */
  }
  ul:hover li {
    text-shadow: #fff 0 calc(var(--y) * -1) 0;
  }
  ul:hover li::before {
    text-shadow: #fff 0 calc(var(--y) * -1) 0;
  }
</style>

小結

樓梯文字動態效果的原理十分簡單，重點在產生雙色文字以及 3D 變形後透過三角函數組合的技巧，只要能熟悉基本原理，就可以輕鬆做出這個效果。

• 原文參考：CSS 樓梯文字動態效果
• 延伸閱讀：CSS 教學大全