转自：
https://www.zhangxinxu.com/wordpress/2019/01/css-typewriter-effect/
https://www.zhangxinxu.com/study/201901/css-typeletter-mixed-char-demo.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css-icon</title>
<style>
.demo {
line-height: 1.25;
}
.typing {
width: 18.5em; height: 1.25em;
border-right: 1px solid transparent;
animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
font-family: Consolas, "Lucida Console", Monaco, "Courier New", monospace;
word-break: break-all;
overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
from { width: 0; }
to { width: 18.5em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: currentColor; }
}
</style>
</head>
<body>
<!--
<div id="magnifying-glass"></div>
<div id="lock"></div> -->
<div class="demo">
<p class="typing">中英文mixed打字effect，作者：张鑫旭</p>
<p><audio src="audio/keyboard.mp3" autoplay></p>
<p><button id="button" hidden>带音效再来一次</button></p>
</div>
<script>
var typing = document.querySelector('.typing');
var audio = document.querySelector('audio');
typing.addEventListener('animationend', function () {
button.removeAttribute('hidden');
});
button.onclick = function () {
if (typing) {
typing.classList.remove('typing');
setTimeout(function () {
typing.classList.add('typing');
}, 10);
}
if (audio) {
audio.play();
}
};
</script>
</body>
</html>audio 无法添加