CSS中文字動(dòng)畫可以為網(wǎng)頁(yè)增加一些趣味性，讓用戶感受到更多的互動(dòng)。下面介紹常用的 CSS 文字動(dòng)畫效果。

// 簡(jiǎn)單的閃爍效果
h1 {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
// 滾動(dòng)字幕效果
p {
animation: scroll 10s linear infinite;
white-space: nowrap;
overflow: hidden;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
// 逐字出現(xiàn)效果
h2 {
animation: typing 3s steps(14), blink-caret .75s step-end infinite;
white-space: nowrap;
overflow: hidden;
border-right: .15em solid orange;
}
@keyframes typing {
from {width: 0}
to {width: 17.5em}
}
@keyframes blink-caret {
from, to {border-color: transparent}
50% {border-color: orange}
}

通過簡(jiǎn)單的代碼，我們可以實(shí)現(xiàn)多種文字動(dòng)畫效果，包括簡(jiǎn)單的閃爍、滾動(dòng)字幕和逐字出現(xiàn)等。在實(shí)際運(yùn)用中，我們需要根據(jù)頁(yè)面設(shè)計(jì)和需求選擇使用相應(yīng)的效果。