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揭秘