CSS3 字幕特效越來越受歡迎，可以為網站添加炫酷的動態(tài)效果，增強用戶體驗。下面將介紹一些常見的 CSS3 字幕特效。

/* 跑馬燈效果 */
.marquee {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee >div {
display: inline-block;
padding-left: 100%;
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
/* 打字機效果 */
.typewriter {
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
letter-spacing: .15em;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
}

以上是兩種常見的 CSS3 字幕特效，分別為跑馬燈和打字機效果。跑馬燈效果通過使用white-space: nowrap;和overflow: hidden;來實現(xiàn)文字滾動，并使用@keyframes定義動畫效果。打字機效果則使用了@keyframes定義一個模擬打字的動畫，并結合文字邊框的閃爍，使得整個效果看起來像是正在打字。這些效果可以通過 CSS3 來實現(xiàn)，不需要使用 JavaScript，具有很好的兼容性和性能優(yōu)勢。