纯CSS实现文字输入动画效果

body {
    background: #282828;
    color: #fff;
    height: 100vh;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

h1 {
    font: bold 190% Consolas, Monaco, monospace;
    border-right: 0.1em solid;
    width: 16.5em;
    width: 26ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(26, end) ,
        cursor-blink 0.4s step-end infinite alternate;
}

/* 通过控制文本展示宽度来模拟输入效果 */
@keyframes typing {
    from {
        width: 0;
    }
}

/* 模拟光标闪烁 */
@keyframes cursor-blink {
    50% {
        border-color: transparent;
    }
}