楼梯文字动态效果

这篇教学会使用 CSS 的文字阴影 text-shadow 和虚拟元素互相搭配，先制作出双色文字的移动，接着套用 transform 产生 3D 变形，就能做出非常有趣的楼梯文字动态效果。

快速导览：

• 使用 text-shadow 制作双色文字移动
• 使用 transform 制作楼梯文字动态效果

使用 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 变形后透过三角函数组合的技巧，只要能熟悉基本原理，就可以轻松做出这个效果。

意见反馈