CSS3中提供了許多新特性,其中之一便是實現(xiàn)電腦打字效果。如果你想要給你的網(wǎng)頁或應(yīng)用程序增添一些動態(tài)效果,那么這種效果會是一個很好的選擇。
/*CSS代碼*/ .typewriter { overflow: hidden; /*隱藏多余的字*/ border-right: .15em solid orange; /*實現(xiàn)光標閃爍*/ white-space: nowrap; /*使文本只用一行*/ margin: 0 auto; /*居中顯示*/ letter-spacing: .15em; /*字符之間的距離*/ animation: typing 3s steps(40, end), blink-caret .5s step-end infinite; /*動畫的時間等參數(shù)*/ } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange } }
上述代碼實現(xiàn)了光標閃爍及文本逐字打印的效果。其中,animation
屬性允許你定義一組或多組動畫規(guī)則,每個規(guī)則表示在不同的時間、不同的位置下,元素應(yīng)該如何顯示。在本例子中定義了typing
和blink-caret
兩個規(guī)則。其中,typing
規(guī)則實現(xiàn)了文本的逐字打印,
blink-caret
規(guī)則實現(xiàn)了光標的閃爍效果。
要使用這段代碼,你只需要在HTML中添加以下代碼:
<p class="typewriter">在此處輸入你想要打印的文本</p>
如此,就可以在你的網(wǎng)頁或應(yīng)用程序中添加電腦打字效果了!