用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打字机