想要讓文本一個一個出來,可以使用CSS的逐字符動畫效果。首先,在CSS中設置一個類名,例如“typing-anim”,然后定義一些屬性:
.typing-anim { overflow: hidden; /* 隱藏超出部分的文本 */ white-space: nowrap; /* 不換行 */ font-size: 24px; animation: typing 4s steps(30) forwards; /* 逐字符動畫,4秒完成,并保留最后一幀 */ } @keyframes typing { from { width: 0; /* 初始狀態寬度為0 */ } to { width: 100%; /* 完成狀態寬度為100% */ } }
這個CSS代碼塊的關鍵在于使用了CSS動畫。動畫的名稱是“typing”,持續時間為4秒。在動畫中,元素從寬度為0開始,逐漸展開到100%的寬度。
當向一個元素添加這個類名時,你就可以實現逐字符打印動畫的效果了。例如,下面的代碼可以讓ID為“text”的元素以逐字符方式出現:
<p id="text" class="typing-anim">Hello, world!</p>
現在你已經了解了如何通過CSS讓文本一個一個地出現!只要應用這個技巧,你就可以為自己的網站增添更有趣的文字展示效果。