一、使用CSS3实现打字效果原理
要模拟打字的效果,就需要让字符一个一个逐步显示。
这里是通过改变容器的宽度,让容器的宽度从0逐步增加,每次增加的宽度为每个字符的宽度,这样就可以模拟打字的效果。
为了增强真实性,可以加上光标的闪烁效果,这样就可以比较好的模拟出打字的效果了。
需要实现的点:
- 怎么使用CSS让文本容器的宽度逐步增加
- 怎么让容器每次增加的宽度等于每个字符的宽度
- 怎么模拟光标的闪烁效果
对应实现方法:
- 使用CSS3中的animation实现动画效果
- 利用animation中的steps实现逐步播放动画
- 利用文本容器的右边框动画实现光标闪烁效果
二、实现
1、英文的打字效果
html:
<h1>A miss is as good as a mile.</h1>
css实现:
@keyframes typing {
from { width: 0}
}
@keyframes blink-caret {
50%