用CSS两分钟实现打字机效果

想实现打字机效果，我们要用到一个标签，那就是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两分钟实现打字机效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。