纯CSS实现打字动画效果

效果图如下：

 <style>
      
        .typing {
            font-size: 24px;
            margin: 200px;
            color: rgb(58, 209, 247);
            width: 16em;
            white-space: nowrap;
            border-right: 2px solid transparent;
            animation: typing 3.5s steps(16, end), blink-caret .75s step-end infinite;
            overflow: hidden;
        }

        /* 打印效果 */
        @keyframes typing {
            from {
                width: 0;
            }

            to {
                width: 16em;
            }
        }

        /* 光标闪啊闪 */
        @keyframes blink-caret {

            from,
            to {
                box-shadow: 1px 0 0 0 transparent;
            }

            50% {
                box-shadow: 1px 0 0 0;
            }
        }
    style>
    <p class="typing">你好呀！派大星。你好呀！海绵宝宝p>

注：16em宽度是因为正好16个中文，宽度是16em