本文摘自PHP中文网，作者青灯夜游，侵删。
本篇文章给大家通过代码实例来介绍一下使用CSS3模拟中文/英文打字效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
推荐：css视频教程
一、使用CSS3实现打字效果原理
要模拟打字的效果，就需要让字符一个一个逐步显示。
这里是通过改变容器的宽度，让容器的宽度从0逐步增加，每次增加的宽度为每个字符的宽度，这样就可以模拟打字的效果。
为了增强真实性，可以加上光标的闪烁效果，这样就可以比较好的模拟出打字的效果了。
需要实现的点：
怎么使用CSS让文本容器的宽度逐步增加
怎么让容器每次增加的宽度等于每个字符的宽度
怎么模拟光标的闪烁效果
对应实现方法：
使用CSS3中的animation实现动画效果
利用animation中的steps实现逐步播放动画
利用文本容器的右边框动画实现光标闪烁效果
二、实现
1、英文的打字效果
相关阅读 >>
CSS3 cubic-bezier()实现链接悬停动画效果的方法介绍
更多相关阅读请进入《CSS3》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
