纯css打印机效果

代码如下：

纯中文版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .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; }
        }
    </style>
</head>
<body>
    <p class="typing">简易中文打字效果</p>
</body>
</html>

15em宽度可以根据你要显示的中文来决定，保证光标最后停留在最后的文字后面。
white-space:nowrap是为了保证一行显示，如果我们固定一行高度的话，这个CSS声明理论上可以不要。
steps可以让动画断断续续，而非连续执行。
光标使用的是box-shadow模拟的，为什么不使用border呢？因为border被用来实现光标和文字撑开2像素间隙。因为overflow:hidden溢出剪裁是相对于border-box的，使用padding-right会露出几像素文字，效果就不完美了。当然，你也可以使用::after伪元素模拟，定位在最后，要更灵活些。
这个效果的光标颜色是跟着文字颜色走的。

中文和英文混合版

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
       .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; }
        }
    </style>
</head>
<body>
    <p class="typing">简易中文效果dnssersjdss</p>
</body>
</html>

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

去除white-space:nowrap，没有强制单行显示，保证不会出现字符阶段场景。
设置等宽字体，这样宽度更好计算。
word-break:break-all使英文字符可以一个一个呈现。
steps功能符后面的数量正好是宽度的2倍，这样，每次step就移动0.5em宽度，正好是1/2中文和近似一个英文字符的宽度。

最后编辑于：2019.07.16 11:26:31