css 实现打字效果

效果如下：

// 结构

// 样式

.typing {
    width: 18em; height: 1.25em;
    border-right: 1px solid transparent;
    animation: typing 5s steps(36, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}

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

/* 光标闪动 */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}