CSS3文字逐個(gè)出現(xiàn)效果可以通過(guò)使用動(dòng)畫(huà)和延遲來(lái)實(shí)現(xiàn),以下是一個(gè)簡(jiǎn)單的示例代碼,可以讓多個(gè)文字元素逐個(gè)出現(xiàn):
HTML代碼:
<div class="text-container"> <span class="text-item">文字1</span> <span class="text-item">文字2</span> <span class="text-item">文字3</span> <span class="text-item">文字4</span> <span class="text-item">文字5</span> </div>
CSS代碼:
.text-container { position: relative; width: 200px; height: 50px; margin: 0 auto; } .text-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 50px; text-align: center; opacity: 0; animation: appear 2s linear forwards; } @keyframes appear { from { opacity: 0; } to { opacity: 1; } }
在這個(gè)示例中,我們創(chuàng)建了一個(gè)包含多個(gè)文字元素的容器,并給每個(gè)元素添加了動(dòng)畫(huà)效果,動(dòng)畫(huà)名為“appear”,持續(xù)時(shí)間為2秒,線性過(guò)渡,且在前向模式下播放,在動(dòng)畫(huà)開(kāi)始時(shí),所有文字元素的透明度都為0,而在動(dòng)畫(huà)結(jié)束時(shí),透明度變?yōu)?,從而實(shí)現(xiàn)逐個(gè)出現(xiàn)的效果。