想實現(xiàn)打字機效果，我們要用到一個標簽，那就是HTML5中的新標簽main
幾乎所有瀏覽器都支持，唯獨Internet Explorer
main標簽?zāi)匾?guī)定文檔的重要內(nèi)容，就是說內(nèi)容對文檔來說應(yīng)該是唯一的，不應(yīng)該包含重復(fù)出現(xiàn)的內(nèi)容。
注意：在同一個文檔中，不能出現(xiàn)一個以上的main元素，main元素不能是以下元素的后代：article、aside、footer、header、nav。

<main class="main"><span>前端GitHub</span> </main>

下面就是style部分

main {width: 100%;height: 229px;display: flex;justify-content: center;align-items: center;}span {display: inline-block;width: 21ch;font: bold 200% Consolas, Monaco, monospace;/*等寬字體*/overflow: hidden;white-space: nowrap;font-weight: 500;border-right: 1px solid transparent;animation: typing 10s steps(21), caret .5s steps(1) infinite;}@keyframes typing {from {width: 0;}}@keyframes caret {50% {border-right-color: currentColor}}

效果圖如下

main打字機

總結(jié)

以上是生活随笔為你收集整理的用CSS两分钟实现打字机效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。