纯css实现打字效果

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

本文将介绍如何使用纯CSS中实现打字机效果，为文本块添加打字机效果有助于吸引网站访问者并保持他们继续阅读的兴趣。打字机效果可用于多种用途，例如制作引人入胜的登录页面、号召性用语元素、个人站点和代码演示:

主要技术要点是通过css动画的steps()来把文本的width从0逐步增加到100%。下面我们来做技术拆解：

为打字机文本容器设置样式

    .typed-out {
      overflow: hidden;
      border-right: .15em solid skyblue;
      font-size: 1.6rem;
      width: 0;
    }

• overflow: hidden;和width: 0;以确保在打印动画执行前，文本内容不展示出来；
• border-right: .15em solid skyblue;为创建打印的光标。

为了确保打印的光标最后停留在文本的最后面，我们还需要给typed-out创建一个父容器container并设置display: inline-block;:

    .container {
      display: inline-block;
    }

制作文本显示动画

为了展示文本内容，我们只需要给typed-out添加一个width从0逐步增加到100%的css动画：

    .typed-out{
        overflow: hidden;
        border-right: .15em solid skyblue;
        white-space: nowrap;
        font-size: 1.6rem;
        width: 0;
        animation: typing 1s forwards;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }

其中为动画添加forwards是为了确保动画执行完毕后，保留执行后的效果（不设置forwards，动画执行完typed-out的width将变回最初的值0）。自此，我们将得到一个将文本从左往右平滑展示的动画： 为了使文本逐个展示，我们需要通过steps()来控制动画分阶段执行，以便确保达到打字的效果： 到现在，我们已经基本实现了打字机效果，（ps：在实际使用过程中，因为文本长短不一，我们需要根据实际情况来来调整运动执行时间和steps()来达到最终效果）

制作闪烁的光标

制作闪烁的光标，我们只需要循环执行动画来改变border-right的边框颜色即可：

    @keyframes blink {
      from { border-color: transparent }
      to { border-color: skyblue; }
    }

最后总结

实现打字机技术要点：文本父容器container需设置display: inline-block;以确保typed-out打印动画执行完毕光标停留紧接在文本之后，typed-out的文本逐字展示主要依赖width从0逐步增加到100%的steps()控制的动画，另外文本长度不同，animation-duration和animation-timing-function也需要相对应地调整， forwards属性则表示动画执行完成后，保留执行现状。光标闪烁要点是通过动画控制边框颜色在transparent和skyblue间交替。（PS：多文本打字，我们只需设置animation-delay等前一个执行完毕，后一个再执行即可）

温馨提醒，如果打字效果在你的项目中尤为重要，我们还是应该考虑JavaScript的方案，毕竟纯css还是有它的局限性的。