今天我们来学习一个有意思的多行文本输入打字效果，像是这样：

这个效果其实本身并非特别困难，实现的方式也很多，在本文中， 我们更多的会聚焦于整个多行打字效果最后的动态光标的实现 。

也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果：

单行文本打字效果

在此之前，我们快速看一个之前在 【Web动画】科技感十足的暗黑字符雨动画 分享过的，非常简单的单行打字效果动画。

在这里的单行打字效果，其核心就是就是让字符一个一个的出现，像是这样：

这里借助了 animation 的 steps 的特性实现，也就是逐帧动画。

从左向右和从上向下原理是一样的，以从左向右为例，假设我们有 26 个英文字符，我们已知 26 个英文字符组成的字符串的长度，那么我们只需要设定一个动画，让它的宽度变化从 0 - 100% 经历 26 帧即可，配合 overflow: hidden ，steps 的每一帧即可展出一个字符。

当然，这里需要利用一些小技巧，我们如何通过字符的数量知道字符串的长度呢？

划重点： 通过等宽字体的特性，配合 CSS 中的 ch 单位 。

如果不了解什么是等宽字体族，可以看看我的这篇文章 -- 《你该知道的字体 font-family》 。

CSS 中， ch 单位表示数字 “0” 的宽度。如果字体恰巧又是等宽字体，即每个字符的宽度是一样的，此时 ch 就能变成每个英文字符的宽度，那么 26ch 其实也就是整个字符串的长度。

利用这个特性，配合 animation 的 steps ，我们可以轻松的利用 CSS 实现打字动画效果：

Pure CSS Typing animation.

h1 {
    font-family: monospace;
    width: 26ch;
    white-space: nowrap;
    overflow: hidden;
    animation: typing 3s steps(26, end);
}

@keyframes typing {
    0{
        width: 0;
    }
    100% {
        width: 26ch;
     }
}

就可以得到如下结果啦：

完整的代码你可以戳这里：

CodePen Demo -- 纯 CSS 实现文字输入效果

上述单行文本打字效果局限

当然，上述效果一开始已经写死了最终的文本。这一块，我们实际中可能是通过 Javascript 不断的赋值新内容。

不过，即便去除掉文本内容生成的方式这个因素，上述看似美好的动画效果，还有几个弊端。

1. 限制了等宽字体 ，这其实就是非常大的一个问题，正常的页面，其实用的肯定都不是等宽字体，常见的衬线与非衬线字体，都不是等宽字体。
2. 限制了单行文本 ，实际效果，类似于 GPT 吐答案这种，单行内容肯定是无法满足的，我们需要有一种光标效果能适配多行文本的方式。

巧用 background 实现多行光标效果

好，那接下来，我们尝试换一种思路实现一个适配单行和多行的文本打字效果。

首先，我们将文本内容的生成，替换成使用 Javascript 生成：

const text = 'Lorem ipsum dolor sit amet consectetur adipisicing elit......';
const contentElement = document.getElementById('content');
let index = 0;

function addNextCharacter() {
  if (index < text.length) {
    contentElement.textContent += text[index];
    index++;
    setTimeout(addNextCharacter, Math.random() * 150 + 30);
  }
}

addNextCharacter();

效果如下：

接下来，我们核心需要实现的就是 任意行数下动态光标的效果 。

也就是最开始的这个效果，文字最后的光标效果：

读到这里，暂停 10 秒，思考一下如果让你来实现，会用什么方式实现？能用什么方式实现？有没有低成本快速能实现的奇技淫巧？

这里，我们可以使用行内元素的 background 渐变实现。

复习一下，之前我们讲过很多次是 background 在 display: inline 和 display: block 下的不同表现。

其核心现象就是 display: inline 内联元素的 background 展现形式与 display: block 块级元素（或者 inline-block 、 flex 、 grid ）不一致。

简单看个例子：

Lorem .....
Lorem .....

这里需要注意，

元素是 块级元素 ，而 是 内联元素 。

p, a {
  background: linear-gradient(90deg, blue, green);
}

Lorem .....
Lorem .....

p, a {
    color: #000;
    background: linear-gradient(90deg, blue, green);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    transition: all 1s linear;
}

p:hover ,
a:hover {
    background-size: 0 100%;
}

效果如下：

完整代码戳这里： CodePen Demo -- background & display Animation DEMO

就可以得到这样不同的动画，可以看到，在 display: inline 的 标签下，动画效果是以行为单位进行变换的。

p {
    display: inline;
    background: linear-gradient(90deg, #fc0, #fc0 calc(100% - 2px), #f00 calc(100% - 2px), #f00);
}

:root {
    --pointerColor: #000;
}
p {
    display: inline;
    background: linear-gradient(90deg, transparent, transparent calc(100% - 2px), var(--pointerColor) calc(100% - 2px), var(--pointerColor));
    animation: colorChange .8s linear infinite;
    padding-right: 4px;
}
@keyframes colorChange {
    0%, 50% {
        --pointerColor: #000;
    }
    50%, 100% {
        --pointerColor: transparent;
    }
}