使用CSS實現打字機效果
發(fā)布時間：2023-10-23 14:07:56 作者：OXXD 
我要評論
我要評論實現打字機效果的關鍵是兩個動畫效果，文字出現的動畫，和光標閃爍出現的動畫,本文小編給大家介紹了如何使用CSS實現打字機效果，文章通過代碼示例介紹的非常詳細,需要的朋友可以參考下
實現效果
實現
HTML 元素：
<div class="typewriter"> <h1 class="typing">The cat and the hat.</h1> </div>
實現打字機效果的關鍵是兩個動畫效果，文字出現的動畫，和光標閃爍出現的動畫。
這兩個動畫的實現方式也很簡單，文字出現的打字機動畫只通過控制元素長度即可。光標閃爍出現可以通過添加右邊框，并且給邊框添加顏色動畫實現。
/* 打字機動畫 */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}/* 光標動畫 */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange }
}然后將動畫效果添加到指定的元素上即可。
.typewriter .typing {
color: #fff;
font-family: monospace;
overflow: hidden; /* 保證文字在動畫之前隱藏 */
border-right: .15em solid orange; /* 使用邊框實現光標 */
white-space: nowrap;
margin: 0 auto;
letter-spacing: .15em;
animation: /** 動畫效果 */
typing 3.5s steps(30, end),
blink-caret .5s step-end infinite;
}結合 Javascript 來控制樣式類顯示隱藏時機，可以輕松為不同文本實現打字機效果。
到此這篇關于使用CSS實現打字機效果的文章就介紹到這了,更多相關CSS打字機效果內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
項目需要開發(fā)一個仿醫(yī)療證書類的一個小卡片，用于模擬展示不同種類的證書信息，證書標題與左右并列的布局結構較好解決，但是根據文本塊寬度，讓里面的內容文字間距自適應，2023-10-20
最近大家刷抖音，是否有刷到拉斯維加斯的新地標 「Sphere」，場館內部的視覺效果非常驚人，我的第一想法就是，這個看起來用 CSS 也可以實現嘛？還有 CSS 不能實現的？本文2023-10-20
CSS中的float屬性是布局中經常會用到的一個屬性，它可以讓元素浮動到其他元素的左、右或中間位置，本文給大家介紹CSS中float用法，感興趣的朋友一起看看吧2023-10-18
要在文本中實現漸變色效果，我們可以使用CSS中的background-clip屬性和CSS漸變來實現,本文給大家分享一個代碼示例，展示如何創(chuàng)建文本漸變色效果，感興趣的同學可以自己動手2023-10-16
這篇文章給大家介紹了如何使用CSS實現漸變圓角邊框的效果，有沒有發(fā)現在現如今的網站應用中，我們大量的使用到這類場景,在解決這類問題時，我們利用了css的mask與mask-comp2023-10-12
無限滾動效果是一種常見的網頁交互方式，可以提供更好的用戶體驗,本文將介紹如何使用 CSS 實現一個簡單的無限滾動效果，并提供詳細的代碼示例,,需要的朋友可以參考下2023-10-11
通過CSS的動畫屬性animation可以實現音頻播放時的動畫效果，同時配合JS操作動畫的animation-play-state屬性，來控制動畫的暫停和播放，本文重點介紹CSS實現音頻播放時柱狀2023-10-10
關于css中的 background-attachment 屬性詳解
這篇文章主要介紹了關于css中的 background-attachment 屬性詳解,在日常的使用中，還是background-attachment:fixed 使用的最多，因為這個屬性更多的時候是跟background-im2023-10-10
這篇文章主要介紹了CSS點擊切換或隱藏盒子的卷起、展開效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-10-08
實現網站變灰通常是為了響應某種特定事件或紀念日，例如悼念等,這可以通過在網站的最外層添加一個全局的 CSS 樣式來實現,本文小編給大家介紹了幾種不同的實現方法，感興趣2023-10-08
