这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战
问题起源
在电视上，我们都看到过一种很酷炫的视频效果，一般是重要的事件发生，电视荧屏上会出现：打字动画，并伴随着有节奏的打字机的声音，有效的增强了文字说服力。
有比如有一款VScode插件，名叫“power model”，在输入代码的时候有非常酷炫的效果：
那么，这种酷炫的视觉效果，如何在网页上实现呢？
今天，我们来尝试一下打字机效果的CSS实现方式。
等宽字体
实现打字动画效果需要使用到等宽字体。见字知意，等宽字体即在相同的font-size情况下每个文字或字母所占得宽度是一样的，常见的等宽字体有：Menlo、Monaco、Courier New、monospace等。
打字动画如何实现呢
这里我们只阐述单行打字动画如何实现！ 这里我们只阐述单行打字动画如何实现！ 这里我们只阐述单行打字动画如何实现！
嗯，重要的话说三遍！
大概思路是通过steps调速函数以及overflow:hidden来实现效果。我们一步一步来。
长度单位ch
这一单位是在《CSS Secret》中学习到的，我们来了解一下他的含义：
ch, 表示
0字形的宽度。
如下所示,11ch的宽度：
如果把内容换成中文可以放几个字呢？
可以看到，11ch的宽度可以放5个半的中文，由此不难推断出，一个中文占用的空间是2ch。
我们先来做一个简单的动画：
然后我们使用steps切换为每次出现一个文字：
嗯，效果不错！
源代码：
<!DOCTYPE html>
<head>
<title>打字机动画</title>
</head>
<body>
<h1>
<!-- I love YOU! -->
国家明确表示九九六违法！
</h1>
</body>
<style>
h1 {
font-family: monospace;
width:24ch;
animation: typing 3s steps(12) infinite;
border: 1px solid lightcoral;
white-space: nowrap; /*避免因为宽度不够导致文字换行*/
overflow: hidden;
}
@keyframes typing {
from {
width: 0;
}
}
</style>
</html>
