偶尔会在网站的首页看到有打字机效果，看着挺酷的，最近研究了一下。
虽然以前看过，但是一直不知道怎么做的，刚开始以为是使用一个div或者span进行遮挡，然后使用动画移动div的位置。但是如果想要看着舒服，还需要动一下文字的位置，这样就比较麻烦了。后来，看了一下网上的做法，发现自己想多了。原来改变文字所在的div、span或者p这些元素的宽高就可以了，先来看看大致的效果。
下面开始来做：
基础页面：
<!DOCTYPE html><html><head><title>test</title><style>.con {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.line {border-right: 2px solid #000;}</style></head><body><div class="con"><p class="line">你是谁的谁，为谁掉眼泪。</p></div></body></html>
加入对文字的修饰
.line {border-right: 2px solid #000;font-size: 200%; /* 字体大小 */text-align: center; /* 文字横向居中 */white-space: nowrap; /* 文字不换行 */overflow: hidden; /* 多余的文字内容隐藏 */}
定义动画
/* 边框闪烁动画 模拟指针闪烁 */@keyframes broders {from {border-right-color: #000;}to {border-right-color: #fff;}}/* 容器宽的改变动画 */@keyframes widths {from {width: 0;}to {width: 100%;} /* 也可以是固定宽 */}
使用动画
.line {border-right: 2px solid #000;font-size: 200%; /* 字体大小 */text-align: center; /* 文字横向居中 */white-space: nowrap; /* 文字不换行 */overflow: hidden; /* 多余的文字内容隐藏 */animation: borders 0.7s infinite normal,widths 2s steps(13); /* 重点 steps() */}
动画的核心：steps()
动画很简单，但是如果只是这样的动画效果，明显没有打字机的效果，那么主要问题就是怎么做到每次移动固定的值，这里使用了steps()来规定整个动画的步数，而我设置的是13，意思就是整个动画过程中移动13次。其实这里就是将之前的运动方式（平滑过渡）改成了一帧一帧的方式，具体的用法可以上网找找，这里有一个还不错的博客
效果(放慢之后的效果)
结束了？
到这里，可以说大概就完成了。
可是仔细看应该可以发现，动画的过程中，字体有些似乎被遮挡了，特别是如果更改为中文的话，更明显。所以并不太美观，所以下面我们还需要再进行一些美化、更改。
美化更改
出现上面问题的原因，还是因为每次动画动的时候把握不了更准确的距离，还有每个字符的所占宽度也可能是不同的，这就是最主要的原因，解决了就好了。
字符宽度
在CSS3中新添加了一些长度单位，其中之一就是ch，表示数字0的宽度，而字母和数字的宽度是一样的，所以，我们就用ch来做长度单位。
英文字符
当然，我们需要配合一个属性来使用，就是font-family，在.line中，添加font-family，属性值为monospace(等宽字体)，这是为了让每个字符都是同样的宽度，包括标点符号。现在的.line：
.line {border-right: 2px solid #000;font-size: 200%; /* 字体大小 */font-family: monospace; /* 等宽字体 */text-align: center; /* 文字横向居中 */white-space: nowrap; /* 文字不换行 */overflow: hidden; /* 多余的文字内容隐藏 */animation: borders 0.7s infinite normal,widths 2s steps(13); /* 重点 steps() */}
这时候，我们可以根据自己的需要，将steps()中的值改为对应的字符数(我这里原本就是13，就不需要改了)。
再看效果(放慢之后的效果)：
这样，我们看到的字符就不存在遮挡的情况了。
但是，还没结束，我们再看看中文的情况吧。
我想，这样的情况，不可能会符合要求的吧！那么我们怎么解决呢？
中文字符
在页面中，单个中文字符的宽度，是英文字符的2倍，那一个英文字符的宽度是1ch，那一个中文字符的宽度就是2ch，所以，我们每一帧动画的位移长度是2ch，那么“我们在一起吧”总共就是12ch，所以总共要走6步，那么我们就设置steps(6)，再来看效果：
(完)
