单行输入实现 关键点: 宽度单位ch, 使用等宽字体

<h1>hello, my name is MaGua.</h1>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
h1 { font: bold 200% Consolas, Monaco, monospace;border-right: .1em solid;width: 24ch; /* 与字符数等值 */margin: 2em 1em;white-space: nowrap;overflow: hidden;animation: typing 12s steps(24, end), /* step数等于字数 */blink-caret .5s step-end infinite alternate;
}
复制代码

多行输入实现

<h1 id='header-1'>hello, my name is MaGua.</h1>
<h1 id='header-2'>You're the best mistake I've ever made.</h1>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes typing2 { to { width: 40ch; } }
@keyframes blink-caret { 50% { border-color: black; } }#header-1 { font: bold 300% Consolas, Monaco, monospace;border-right: .1em solid transparent;//width: 100px; /* fallback */width: 24ch; /* 与字符数等值 */margin: 2em 1em;white-space: nowrap;overflow: hidden;animation: typing 12s steps(24, end), /* step数等于字数 */blink-caret .5s step-end 24 alternate;
}
#header-2 { font: bold 300% Consolas, Monaco, monospace;border-right: .1em solid transparent;width: 0;margin: 2em 1em;white-space: nowrap;overflow: hidden;animation: typing2 20s 12s steps(40, end) forwards, /* step数等于字数 */blink-caret .5s 12s step-end infinite alternate;
}
复制代码

中文实现

<p>敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏敬谢不敏</p>
复制代码

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 50% { border-color: transparent; } }
p { font: 400 200%;border-right: .1em solid;width: 53.2ch; /* 1.6625倍字数 */margin: 2em 1em;white-space: nowrap;overflow: hidden;animation: typing 16s steps(32, end), /* step数等于字数 */blink-caret .5s step-end infinite alternate;
}
复制代码