CSS实现文字打字动画（+1白话讲解）

介绍

很多时候，我们会有一些奇怪的骚想法，比如让网页中的一些特定文本像敲代码一样一个一个显示出来，有一种命令行的感觉，增加设计感，很多人觉得这个效果要用很长一段JS来实现.... 正好手头有个例子，我决定用CSS实验一下

开始操作

原图

emmmmmm...请忽略我的字体

• 想法1: 让这段文字从宽度0变成实际宽度

.title{
  ...
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}
复制代码

emmmm, 忘记禁止折行和剪切超出部分文本了

修改

.title{
  ...
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s;
}
@keyframes typing{
  from {
    width: 0;
  }
}
复制代码

看起来还不错，但是还不够，我们希望字符能一个一个出来，想了想，Animation里面有个叫steps的东西，各位可以简单的理解(具体的这里就不介绍啦)为: 里面放多大的数字就是分多少帧执行，比如steps(5)就是将动画分成5帧执行。

就算我们能让动画一帧一帧执行，但是怎么让字符一个一个出现呢?

答案是.... 无人问津的ch单位，这是CSS3的新单位，表示"0"的宽度，到这我想真正的解决方案就出现啦！

在等宽字体中，"0"字形的宽度和其他所有字形的宽度是一样的

修改

.title{
  ...
  width: 17ch; //别忘了把空格算上!
  white-space: nowrap;
  overflow: hidden;
  animation: typing 6s steps(17);  //steps里为你的字符数
}
@keyframes typing{
  from {
    width: 0;
  }
}
复制代码

或许我们还需要一个闪烁的光标？那就留着下次讲好了(如果我没忘的话)

闪烁动画文章更新啦 点这里

文章翻译改编于CSS揭秘