想實現打字機效果，我們要用到一個標簽，那就是HTML5中的新標簽main
幾乎所有瀏覽器都支持，唯獨Internet Explorer
main標簽呢規定文檔的重要內容，就是說內容對文檔來說應該是唯一的，不應該包含重復出現的內容。
注意：在同一個文檔中，不能出現一個以上的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打字機

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。