本篇文章给大家通过代码实例来介绍一下使用css3模拟中文/英文打字效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
推荐：css视频教程
一、使用CSS3实现打字效果原理
要模拟打字的效果，就需要让字符一个一个逐步显示。
立即学习“前端免费学习笔记（深入）”；
这里是通过改变容器的宽度，让容器的宽度从0逐步增加，每次增加的宽度为每个字符的宽度，这样就可以模拟打字的效果。
为了增强真实性，可以加上光标的闪烁效果，这样就可以比较好的模拟出打字的效果了。
需要实现的点：
怎么使用CSS让文本容器的宽度逐步增加
怎么让容器每次增加的宽度等于每个字符的宽度
怎么模拟光标的闪烁效果
对应实现方法：
使用CSS3中的animation实现动画效果
利用animation中的steps实现逐步播放动画
利用文本容器的右边框动画实现光标闪烁效果
二、实现
1、英文的打字效果
html：
A miss is as good as a mile.
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, end), blink-caret .5s step-end infinite alternate; //这里的alternate是为了让光标闪烁的正常一点}
这里因为是实现英文的打字效果，所以字体使用的是等宽字体：monospace，配合长度单位 ch （1ch就是当前字体下数字0的宽度），在等宽字体下，其它字符的宽度也等于1ch。这样就可以设置文本容器的宽度 = 所有字符个数 * 1ch。
让文本容器的宽度从0逐步增加到实际宽度利用的是animation的steps。
steps可以让动画分成多少步去播放，像这里因为有28个字符，要让一个一个字符显示，就把连续的动画分成28步来播放。
blink-caret动画是实现光标的闪烁效果的，改变右边框的透明度重复播放实现。
2、中文的打字效果
中文的打字效果和英文不同的点就在于在等宽字体monospace下，中文的一个字符等于 2ch，所以文本容器的宽度 = 中文字符个数 * 2ch。
更多编程相关知识，请访问：编程入门！！
以上就是使用CSS3模拟打字效果（代码实例）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1616921.html
微信扫一扫 
支付宝扫一扫 
