接下来我们要使用 CSS 实现打字效果,就是让字符一个一个的出现,像是这样:
这里借助了 animation 的 steps 的特性实现,也就是逐帧动画。
steps
从左向右和从上向下原理是一样的,以从左向右为例,假设我们有 26 个英文字符,我们已知 26 个英文字符组成的字符串的长度,那么我们只需要设定一个动画,让它的宽度变化从 0 - 100% 经历 26 帧即可,配合 overflow: hidden,steps 的每一帧即可展出一个字符。
0 - 100%
overflow: hidden
当然,这里需要利用一些小技巧,我们如何通过字符的数量知道字符串的长度呢?
划重点:通过等宽字体的特性,配合 CSS 中的 ch 单位。
ch
如果不了解什么是等宽字体族,可以看看我的这篇文章 -- 《你该知道的字体 font-family》。
CSS 中,ch 单位表示数字 “0” 的宽度。如果字体恰巧又是等宽字体,即每个字符的宽度是一样的,此时 ch 就能变成每个英文字符的宽度,那么 26ch 其实也就是整个字符串的长度。
26ch
利用这个特性,配合 animation 的 steps,我们可以轻松的利用 CSS 实现打字动画效果:
<h1>Pure CSS Typing animation.</h1>
h1 { font-family: monospace; width: 26ch; white-space: nowrap; overflow: hidden; animation: typing 3s steps(26, end); } @keyframes typing { 0{ width: 0; } 100% { width: 26ch; } }
就可以得到如下结果啦:
完整的代码你可以戳这里:
CodePen Demo -- 纯 CSS 实现文字输入效果转载自:https://www.cnblogs.com/coco1s/p/15088977.html
【推荐资讯】 Recommended information