小tips: 纯CSS实现打字动画效果

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8357

本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。

一、文字打印效果预览

模拟编辑器，或者输入框中文字啪啦啪啦输入的效果，纯CSS实现，这种效果可以用在在线版简历，或者年终盘点活动上。

实现效果如下GIF截图：

动画效果主要由两部分组成，一部分是文字依次呈现，另外一部分就是光标的不断闪烁。

您可以狠狠地点击这里： 纯CSS实现打字效果（带音效）demo

demo页面还配了打字键盘音效，锦上添花，效果绝佳，点击页面按钮即可听到：

二、CSS打印机效果的实现

HTML很简单，如下：

<p class="typing">简易中文打字效果，作者：张鑫旭</p>

CSS代码如下：

.typing {
    width: 15em;
    white-space: nowrap;
    border-right: 2px solid transparent;
    animation: typing 3.5s steps(15, end), blink-caret .75s step-end infinite;
    overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
  from { width: 0; }
  to { width: 15em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
  from, to { box-shadow: 1px 0 0 0 transparent; }
  50% { box-shadow: 1px 0 0 0; }
}

可以看到其实实现原理很简单，打字效果其实就是改变容器的宽度实现的。

然后其中有一些细节可以提一下：

• 15em宽度是因为正好15个中文，宽度是15em。
• white-space:nowrap 是为了保证一行显示，如果我们固定一行高度的话，这个CSS声明理论上可以不要。
• steps之前有专门写文章深入介绍过，可参见“ CSS3 animation属性中的steps功能符深入介绍 ”一文。可以让动画断断续续，而非连续执行。
• 光标使用的是 box-shadow 模拟的，为什么不使用 border 呢？因为 border 被用来实现光标和文字撑开2像素间隙。因为 overflow:hidden 溢出剪裁是相对于 border-box 的，使用 padding-right 会露出几像素文字，效果就不完美了。当然，你也可以使用 ::after 伪元素模拟，定位在最后，要更灵活些。
• 这个效果的光标颜色是跟着文字颜色走的，例如，我们设置文字颜色为红色，则呈现效果如下图：
  

  另外，你可以不知道的是浏览器原生的光标颜色是可以设置的，方法还不止一个，有兴趣可以参见我之前的文章：“ CSS改变插入光标颜色caret-color简介及其它变色方法 ”。

三、中英文混合打字效果实现

CSS实现打字效果的优点是简单快捷，不足就是上面的方法如果是中英文混合的，就有些吃力，不过也不是没有办法实现，我们可以定死高度为一行内容，让字符自然排列，这样，可以保证字符内容永远不会截断，因为不同字符程序时机有差异，反而效果更显真实。

效果如下GIF截图示意：

您可以狠狠地点击这里： 纯CSS实现中文英文打字效果demo

相关CSS如下：

.typing {
    width: 18.5em; height: 1.25em;
    border-right: 1px solid transparent;
    animation: typing 3.5s steps(37, end), blink-caret .75s step-end infinite;
    font-family: Consolas, Monaco;
    word-break: break-all;
    overflow: hidden;
}
/* 打印效果 */
@keyframes typing {
    from { width: 0; }
    to { width: 18.5em; }
}
/* 光标闪啊闪 */
@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: currentColor; }
}

和上面中文实现区别在于：

• 去除 white-space:nowrap ，没有强制单行显示，保证不会出现字符阶段场景。
• 设置等宽字体，这样宽度更好计算。关于等宽字体可以参见我之前文章“ 等宽字体在web布局中应用以及CSS3 ch单位 ”。
• word-break:break-all 使英文字符可以一个一个呈现。
• steps 功能符后面的数量正好是宽度的2倍，这样，每次step就移动0.5em宽度，正好是1/2中文和近似一个英文字符的宽度。

四、结语

应该还有其他更好的CSS实现方法，欢迎补充，欢迎交流。

困了，老婆已经站在身后了，今天不扯淡了，催着睡觉了。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。

本文地址： https://www.zhangxinxu.com/wordpress/?p=8357

（本篇完）