色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css3 電腦打字效果

錢諍諍2年前12瀏覽0評論

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)該如何顯示。在本例子中定義了typingblink-caret兩個規(guī)則。其中,typing規(guī)則實現(xiàn)了文本的逐字打印,blink-caret規(guī)則實現(xiàn)了光標的閃爍效果。

要使用這段代碼,你只需要在HTML中添加以下代碼:

<p class="typewriter">在此處輸入你想要打印的文本</p>

如此,就可以在你的網(wǎng)頁或應(yīng)用程序中添加電腦打字效果了!