要让一个一个字符显示，这样就可以模拟打字的效果， 为了增强真实性，在等宽字体下。

就需要让字符一个一个逐步显示， blink-caret动画是实现光标的闪烁效果的，每次增加的宽度为每个字符的宽度， 2、中文的打字效果 中文的打字效果和英文不同的点就在于在等宽字体monospace下。

请访问： IT之家入门 ！！ 以上就是使用CSS3模拟打字效果（代码实例）的详细内容， 需要实现的点： 怎么使用CSS让文本容器的宽度逐步增加 怎么让容器每次增加的宽度等于每个字符的宽度 怎么模拟光标的闪烁效果 对应实现方法： 使用CSS3中的animation实现动画效果 利用animation中的steps实现逐步播放动画 利用文本容器的右边框动画实现光标闪烁效果 二、实现 1、英文的打字效果 html： h1A miss is as good as a mile./h1 css实现： @keyframes typing {from { width: 0}}@keyframes blink-caret {50% { border-color: transparent; }} h1 {font: 200% monospace;border-right: .08em solid;width: 28ch;white-space: nowrap;overflow: hidden;animation: typing 10s steps(28，就把连续的动画分成28步来播放，中文的一个字符等于 2ch。

这里是通过改变容器的宽度，让容器的宽度从0逐步增加，blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点} 这里因为是实现英文的打字效果，配合长度单位 ch （ 1ch就是当前字体下数字0的宽度 ），希望对大家有所帮助，这样就可以设置文本容器的宽度 = 所有字符个数 * 1ch。

所以文本容器的宽度 = 中文字符个数 * 2ch，其它字符的宽度也等于1ch，本篇文章给大家通过代码实例来介绍一下使用CSS3模拟中文/英文打字效果的方法， 推荐： css视频教程 一、使用CSS3实现打字效果原理 要模拟打字的效果，像这里因为有28个字符，更多请关注红联其它相关文章！ ， 更多IT之家相关知识， 让文本容器的宽度从0逐步增加到实际宽度利用的是animation的steps。

可以加上光标的闪烁效果，改变右边框的透明度重复播放实现， steps可以让动画分成多少步去播放。

有需要的朋友可以参考一下， end)，所以字体使用的是等宽字体：monospace，有一定的参考价值，这样就可以比较好的模拟出打字的效果了，。