仅使用 CSS 创建打字机动画效果
创建打字机效果比您想象的要容易。虽然实现这种效果的最常见方法是使用 JavaScript，但我们也可以使用纯 CSS 来创建我们的打字机动画。
在本文中，我们将了解如何仅使用 CSS 创建打字机动画效果。它简单、漂亮、容易。我们还将看看使用 CSS 与 JavaScript 创建这种效果的利弊。
要按照本文进行操作并对最终的打字机效果进行动画处理，您需要对 CSS 和 CSS 动画有基本的了解。如果你有这个基本知识，那么你就可以开始了。
使用 JavaScript 与 CSS 用于打字机动画的优缺点
最终，CSS 和 JavaScript 之间的选择将取决于您的特定需求和资源。让我们回顾一下每种方法的一些优点和缺点，以帮助您做出决定。
仅使用 CSS 比使用 JavaScript 更简单、更容易实现。这种方法使用的资源也比 JavaScript 少，这对于低端设备的性能非常重要。
但是，当仅使用 CSS 时，打字机动画可能不像使用 JavaScript 那样动态。此外，您可能无法处理更复杂的方案，例如动态更改动画的内容。
相比之下，使用 JavaScript 可以更好地控制动画。您可以微调效果的时间并使其更具动态性。JavaScript 可以比 CSS 更灵活、更具适应性，尤其是在您需要快速更改动画内容的情况下。
另一方面，JavaScript 的实现可能比 CSS 更复杂，特别是对于不熟悉它的开发人员。
如果你只需要一个简单的静态打字机效果，CSS 可能是你要走的路。但是如果你需要更多的控制或动态内容，JavaScript 可能是更好的选择。
现在让我们继续构建我们的打字机效果！
我们的打字机 CSS 动画项目概述
为了实现打字机效果，我们将对文本进行动画处理，使其逐渐显示文本。我们还将有一个光标，该光标键入文本，然后在完成键入后继续闪烁。
在我们深入研究之前，让我们回顾一下我们将使用的一些 CSS 属性。
我们将用于 @keyframes 动画，因为此规则使我们能够更好地控制要执行的动画。在我们的内容上使用属性 overflow 将确保每个单词都按照动画显示，而不是一次显示所有单词。
该 white-space 属性会将动画修剪为一行。同时，该 border-right-color 属性将帮助我们的光标从浅灰色变为透明，使动画具有逼真的闪烁光标触感。
最后，对 width 属性进行动画处理0%， 100% 以实现每个字母一次出现一个的效果。
设置项目
首先，让我们定义文本的结构，HTML我们将使用 CSS 使用打字机效果进行动画处理。在此项目的文件夹中，创建一个 index.html 文件，该文件将充当此项目演示的网页，并粘贴以下内容：
我们在此文件中包含一个包含两段文本的 div 容器。每个段落都有自己的类 - first_line 和 second_line ，分别 - 因为我们试图实现多行打字机效果。
这就是我们在 index.html 页面中需要做的所有事情。让我们继续设置网页样式并创建动画。
设置网页样式
在项目文件夹中创建另一个名为 style.css 并粘贴以下内容的文件：
在我们的style.css文件中，我们尝试设置文本两行的样式。我们使用了前面讨论的一些 CSS 属性来使动画正常工作。
我们将该 overflow 属性 hidden 设置为防止项目中出现不必要的水平滚动和额外的空格。该 white-space: nowrap 设置会将我们的动画放入一行中。
最后，该 border-right 属性将充当我们的光标，我们希望在显示文本时闪烁。我们添加了其中两个 - 每行一个 - 但我们分配的黑色使它们暂时不可见。
您可能已经注意到，我们使用十六进制颜色代码 #111 将背景颜色设置为黑色，而我们的文本颜色 #d8e0db 转换为非常浅的棕褐色。您可以为自己的文本选择您喜欢的任何颜色，但要确保颜色彼此充分对比以符合辅助功能标准。
此外，我们正在使用 Major Mono Display 字体系列。就像背景和文本颜色一样，你还可以选择任何你想要的字体。但是，某些字体在打字机效果下比其他字体效果更好。
您可能需要选择干净的无衬线字体或等宽字体以获得最佳效果。另外，您将看到我们在 @keyframes 下面设置了一个width。您可能需要更改 以适应 width 您选择使用的任何字体，并确保光标闪烁动画正常工作。
使用 CSS @keyframes 创建打字机动画和 steps()
我们将使用 CSS @keyframes 为两行文本创建效果。我们希望所有文本都以逐个字母的方式键入，就像打字机一样：
规则 @keyframes 分别命名 typewriter_1 和 typewriter_2 。每个规则都有两个关键帧 — from 和 to 。to关键帧使用 rem ，一个可扩展的CSS单位，使我们的设计灵活、响应迅速且易于访问。
在关键帧中typewriter_1，我们将 from设置为0，to设置为38rem .这可确保当文本逐个字母显示时，我们的光标将从文本开头的宽度 0 到文本末尾的宽度 38 闪烁。我们还将typewriter_2 将 from 和 to 宽度分别设置为0和 40rem 。
我们将 @keyframes 创建一个动画，其中元素从左到右逐渐出现，就像打字机打印文本一样。
若要应用此动画，请使用该 animation 属性将其包含在字幕类选择器中。在我们的例子中，我们会将 div 字幕更新为以下内容：
动画与动画速度一起添加，以流畅地显示我们的文本。结果如下：
它看起来不像我们想要的方式，对吧？请记住，我们的目标是让它看起来像打字机的工作方式——也就是说，以逐个字母的方式打字。为了实现这一点，我们将使用 steps() CSS函数。
CSS 中的函数用于指定计时steps()函数中的间隔数或步数。在我们的例子中，我们将在我们的 animation 属性中使用它来允许我们的文本逐个字母显示：
在上面的代码中，您会注意到步骤分别是33和 31 。我们通过自己计算文本中的字符数来获得这些数字。在我们的浏览器中检查结果：
现在，这一切都走到了一起。但是，请注意，在我们的结果中，光标没有显示或闪烁。我们希望光标闪烁，以使打字机动画看起来更逼真。此外，两行文本同时出现，这不是打字机的外观。
为了解决这个问题，我们还将使用@keyframes为每行的光标创建动画：
在上面的代码中， border-right-color 两个光标的属性设置将在移动时从黑色变为白色。这将为我们的每个光标提供闪烁效果。
我们将在文本类的属性中包含 animation 此项，并将每个动画方向属性设置为infinite。这将使光标消失并 780ms 永远重新出现：
在上面的代码中，我们添加了 infinite 第二个光标动画，因为我们的文本在第二行结束。这将使光标消失并 900ms 永远重新出现。
我们还在second_line 中添加 了 7 秒 delay ，因此它不会与我们的第一行类型和显示同时运行。
全部完成！在浏览器中查看结果时，我们现在应该看到以下内容：
恭喜！我们只是只用 CSS 制作了一个打字机动画效果。
请注意，如果您只需要一行文本，则可以执行相同的步骤。唯一的区别是添加到 infinite 第一行的动画中，因为没有第二行。这将确保光标在单行末尾连续闪烁。您也不需要像我们在第二行中那样添加延迟属性。
总结
在本文中，我们研究了如何使用 CSS 创建完全没有JavaScript的打字机动画效果。只需基本的HTML代码和非复杂的 CSS 语法即可轻松做到这一点。另外，它没有浏览器支持问题！
版权声明: 本文为 InfoQ 作者【互联网工科生】的原创文章。
原文链接:【http://xie.infoq.cn/article/a6e97d123d065c79c8427f7d0】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
还未添加个人签名 2023-06-19 加入
还未添加个人简介
评论