模拟打字效果
前沿
看到上面的打字效果，相信大家第一时间想到的就是使用typed.js，其强大的功能，相信大家在使用的时候肯定得到了不少好处。但是如果说我只是想用一下打字效果，额外引入一个js库肯定会带来额外的负担，而且本身在功能并不繁琐的情况下，也会带来相应的成本。
当然，第三方的库自然有其对应的好处因为其更加强大，用typed.js举例，其中对于你出现的字的速度，开始结束的点，以及各种你能想到的操作都是OK的。对于这个不做过多的介绍，有兴趣的可以参考
typed.js实例
效果实现
对于上面的模拟打字效果来说，只用css如何实现？分为两部，第一个是实现文字的动画部分
代码语言：javascript复制// Html
// 新增一个对应的容器以及容器内需要打字效果的内容
<div class="wrapper">
<div class="typing-demo">
This is a typing demo.
</div>
</div>
// Css
// 容器样式
.wrapper {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
通过以上方式，我们创建了一个对应的容器，其中容器内部放置了我们需要动画的相关文字。
想象一下，对于文字的输入来说，最终其对应的宽度就是整个文字数量的一个宽度，对于一定文字数量的div来说，如何确定它的宽度，毕竟每个文字的宽度大小都是不一样的。这里我们使用ch字符宽度单位，这个单位对于大多数人来说都是陌生的。1ch表示的就是字符0的宽度单位，也就是字符0的宽度为ch的标准单位。
那么我们的文案中有22个字符，所以对于上述来说就设置好宽度为22ch即可。一直闪烁的右侧竖线我们可以使用border-right进行对应的模拟就好。
那么目前来说typing-demo的代码为
代码语言：javascript复制.typing-demo {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
其产生的效果是
添加动画
目前样子OK，我们来对其添加对应的动画。首先文字部分，我们知道1ch就是一个以0字符为标准的一个字符的宽度。typing-demo的样式宽度要从0开始。
代码语言：javascript复制.typing-demo {
width: 22ch;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
animation: typing 2s steps(22);
}
@keyframes typing {
from {
width: 0
}
}
具体的step的用法可以参照steps功能介绍
到此，文字的动画就OK了
border动画
那么给border动画添加一闪一闪的效果如何搞定呢？我们需要的是等前置的动画OK之后再去搞定border动画方式。
在原来基础上再添加一个border动画，最终css代码为
代码语言：javascript复制.wrapper {
height: 100vh;
/*This part is important for centering*/
display: flex;
align-items: center;
justify-content: center;
}
.typing-demo {
width: 22ch;
animation: typing 2s steps(22), blink .5s step-end infinite alternate;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid;
font-family: monospace;
font-size: 2em;
}
@keyframes typing {
from {
width: 0
}
}
@keyframes blink {
50% {
border-color: transparent
}
}
致此，达成开头的打字效果。可能在我们大多数人的认知中，都认为动画是那种连续的方式，但是还有这种跳步的方式，对比以下两种，可以发现明显的差别。
跳步对比
有什么问题欢迎大家留言讨论！
