【动画进阶】类 ChatGpt 多行文本打字效果 - ChokCoco
内容提要
本文介绍了如何实现多行文本输入的打字效果，重点在于动态光标的实现。通过CSS动画和JavaScript生成文本，结合内联元素的背景渐变，成功创建了闪烁的光标效果，适用于任意行数的文本。
延伸解读
单行打字动画的局限与改进
文章指出，纯CSS单行打字效果依赖等宽字体和ch单位，通过steps动画控制宽度实现逐字显示。但这种方式文本内容固定，且无法适应多行场景。改用JavaScript动态生成文本后，虽然内容灵活，但光标效果仍需单独处理。这提示我们，在实现打字效果时，需根据实际需求选择方案，并注意单行与多行的差异。
内联元素背景的独特表现
文章重点分析了display: inline元素与块级元素在背景渲染上的区别：内联元素的背景会按行分割，每行独立渲染，而块级元素则整体渲染。利用这一特性，通过设置背景渐变，可以轻松实现光标跟随文本末尾的效果。理解这一原理是掌握多行动态光标的关键。
动态光标的实现技巧
文章提出一种巧妙方法：将文本容器设为display: inline，并设置背景渐变，前100% - 2px为透明，最后2px为光标颜色。通过CSS动画改变光标颜色的透明度，实现闪烁效果。这种方法元素最少，且能自动适应任意行数，无需额外计算光标位置。
替代方案与选择建议
文章提到，除了背景渐变方案，还可以在文本末尾插入一个2px宽的span元素，通过动画改变其颜色来实现光标。但作者认为背景渐变方案更巧妙，元素更少。读者可根据项目需求选择，若追求代码简洁，背景渐变是优选；若需更灵活控制，span方案也不失为一种方法。
Q&A
如何实现多行文本的打字效果？
可以通过CSS动画和JavaScript生成文本，结合动态光标的实现，来创建多行文本的打字效果。
动态光标效果是如何实现的？
动态光标效果通过行内元素的背景渐变实现，利用CSS中的动画和内联元素的特性。
在实现打字效果时，如何计算字符串的长度？
可以通过等宽字体的特性和CSS中的ch单位来计算字符串长度，ch单位表示数字“0”的宽度。
使用JavaScript生成文本的代码示例是什么？
可以使用如下代码：const text = 'Lorem ipsum...'; let index = 0; function addNextCharacter() { if (index < text.length) { contentElement.textContent += text[index]; index++; setTimeout(addNextCharacter, Math.random() * 150 + 30); } } addNextCharacter();
CSS中的ch单位有什么特别之处？
ch单位在等宽字体下表示每个字符的宽度，能够帮助计算字符串的长度。
如何使用CSS实现闪烁的光标效果？
可以通过设置背景渐变和动画，结合padding-right属性来实现闪烁的光标效果。
