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() 基本數學運算
<!-- 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 變形，就可以產生樓梯效果，由於翻轉之後出現「縫隙」，可以透過三角函數計算位移的數量進行位移，就能補足翻轉後產噌的縫隙。
<!-- 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 變形後透過三角函數組合的技巧，只要能熟悉基本原理，就可以輕鬆做出這個效果。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～