您好,登录后才能下订单哦!
小编给大家分享一下如何使用CSS3模拟打字效果,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
一、使用CSS3实现打字效果原理
要模拟打字的效果,就需要让字符一个一个逐步显示。
这里是通过改变容器的宽度,让容器的宽度从0逐步增加,每次增加的宽度为每个字符的宽度,这样就可以模拟打字的效果。
为了增强真实性,可以加上光标的闪烁效果,这样就可以比较好的模拟出打字的效果了。
需要实现的点:
怎么使用CSS让文本容器的宽度逐步增加
怎么让容器每次增加的宽度等于每个字符的宽度
怎么模拟光标的闪烁效果
对应实现方法:
使用CSS3中的animation实现动画效果
利用animation中的steps实现逐步播放动画
利用文本容器的右边框动画实现光标闪烁效果
二、实现
1、英文的打字效果
html:
<h2>A miss is as good as a mile.</h2>
css实现:
@keyframes typing { from { width: 0} } @keyframes blink-caret { 50% { border-color: transparent; } } h2 { 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模拟打字效果有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。