Office_services/Web_Design

接下来我们要使用 CSS 实现打字效果，就是让字符一个一个的出现，像是这样：

这里借助了 animation 的 steps 的特性实现，也就是逐帧动画。

从左向右和从上向下原理是一样的，以从左向右为例，假设我们有 26 个英文字符，我们已知 26 个英文字符组成的字符串的长度，那么我们只需要设定一个动画，让它的宽度变化从 0 - 100% 经历 26 帧即可，配合 overflow: hidden，steps 的每一帧即可展出一个字符。

当然，这里需要利用一些小技巧，我们如何通过字符的数量知道字符串的长度呢？

划重点：通过等宽字体的特性，配合 CSS 中的 ch 单位。

如果不了解什么是等宽字体族，可以看看我的这篇文章 -- 《你该知道的字体 font-family》。

CSS 中，ch 单位表示数字 “0” 的宽度。如果字体恰巧又是等宽字体，即每个字符的宽度是一样的，此时 ch 就能变成每个英文字符的宽度，那么 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