【实战】用CSS实现文本打字机效果

之前，我们的文章中已经有通过 JS 的方式实现文本打字机的效果了，具体可以看这篇文章：【前端三分钟】利用Javascript实现打字效果

在本文中，你将学习如何使用纯CSS实现打字机效果，使网站的文本更加动态和迷人。

打字机的效果是文字逐渐显露出来，就好像是在你眼前打字一样。在你的文本中添加打字机的效果可以帮助吸引你网站的访问者，并保持他们进一步阅读的兴趣。打字机效果可以用于许多目的，例如制作引人入胜的登录页面、标语、代码演示。

打字机效果很容易创建

打字机效果很容易制作，要理解本文，你需要掌握CSS和CSS动画的基本知识。

首先我们来解释一下打字机效果的实现方式:

打字机动画将通过使用CSS steps()函数一步一步地将文本元素的宽度从0更改为100%，从而显示文本元素。
一个闪烁动画将使光标动起来。

开始

让我们首先为我们的打字机效果创建web页面。它将为我们的打字机文本包含一个<div>容器:

<!doctype html>
<html>
  <head>
    <title>Typewriter effect</title>
    <style>
      body{
        background: navajowhite;
        background-size: cover;
        font-family: 'Trebuchet MS', sans-serif; 
      }
  </style>
  </head>
  <body>
    <div class="container">
      <div class="typed-out">Web Developer</div>
    </div>
  </body>
</html>

alt

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

现在我们已经有了网页的布局，让我们用" typeout "类为<div>添加样式:

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

注意，为了使打字机效果生效，我们添加了以下内容:

"overflow: hidden;"和"width: 0;"，以确保在输入效果开始之前不会显示文本内容。
"border-right: .15em solid orange;"，用来创建打字机的光标。

在产生输入效果之前，为了在输入完的元素的最后一个字母处停止光标，就像打字机所做的那样，我们将为输入的元素创建一个容器，并添加display: inline-block;:

.container {
  display: inline-block;
}

制作显示文本动画

打字机动画将创建一个效果，一个字母一个字母地打印出输入元素中的文本。我们将使用@keyframes CSS动画实现这个效果:

@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

正如所看到的，所有这些动画所做的只是将元素的宽度从0更改为100%。

现在，我们将在我们的键入类中包括这个动画，并设置其动画方向为forward，以确保文本元素在动画完成后不会返回width: 0:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: typing 1s forwards;
}

我们的文本元素将简单地从左到右平稳地显示:

在这里插入图片描述

添加步骤以实现打字机效果

到目前为止，我们的文本被揭示了，但是是以一种平滑的方式，不是一个字母一个字母地揭示文本。这是一个开始，但显然不是打字机的效果。

为了让这个动画一个字母一个字母地显示我们的文本元素，或者像打字机那样以步骤显示文本元素，我们需要将typed-out类包含的typing动画拆分为步骤，以便它看起来像是被键入的。这就是CSS函数steps()的作用:

.typed-out{
  overflow: hidden;
  border-right: .15em solid orange;
  white-space: nowrap;
  font-size: 1.6rem;
  width: 0;
  animation: 
    typing 1s steps(20, end) forwards;
}

如你所见，我们使用CSS steps()函数将typing动画分为20个步骤。这是我们现在看到的: 在这里插入图片描述

这是我们目前为止的完整代码:

<html>
  <head>
    <title>Typewriter effect</title>
  </head>
  <style>
    body{
      background: navajowhite;
      background-size: cover;
      font-family: 'Trebuchet MS', sans-serif; 
    }
    .container{
      display: inline-block;
    }
    .typed-out{
      overflow: hidden;
      border-right: .15em solid orange;
      white-space: nowrap;
      animation: 
      typing 1s steps(20, end) forwards;
      font-size: 1.6rem;
      width: 0;
    }
    @keyframes typing {
      from { width: 0 }
      to { width: 100% }
    }
  </style>
<body>
<h1>I'm Matt, I'm a</h1>
<div class="container">
  <div class="typed-out">Web Developer</div>
</div>
</body>
</html>

你可以通过调整 animation 中的时间和steps函数的第一个参数来达到较好的效果。

制作和样式闪烁光标动画

很明显，最初的打字机没有闪烁光标，但增加一个来模仿现代电脑/文字处理器闪烁光标的效果已经成为一种传统。闪烁的光标动画有助于使打印出来的文本从静态文本元素中脱颖而出。

要添加一个闪烁光标动画到我们的打字机动画，我们首先创建闪烁动画:

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

这个动画将改变输入元素的边框颜色——它被用作打字机效果的光标——从透明变为橙色。

我们将在typed-out类的规则中包含这个动画，并将其动画方向属性设置为infinite，使光标每隔0.8秒消失一次，然后再次出现:

.typed-out{
    overflow: hidden;
    border-right: .15em solid orange;
    white-space: nowrap;
    font-size: 1.6rem;
    width: 0;
    animation: 
      typing 1s steps(20, end) forwards,
      blink .8s infinite;
}

在这里插入图片描述

调整闪烁打字效果的代码

我们可以通过调整光标的右边框使光标变薄或变厚:0.15 em solid orange;属性，或者可以使光标为不同的颜色，给它一个边界半径，调整其闪烁效果的频率，等等。

总结

在本文中，我们已经看到使用CSS创建动画“打字机”文本是多么容易。这种打字效果绝对可以为你的网页增添乐趣。

不过，或许以温和的警告作为结束是值得的。**这个技巧最适合用于小部分的非关键文本，只是为了创造一点额外的乐趣。**但是要注意不要过于依赖它，因为使用CSS动画有一些限制。请确保在一系列设备和视口大小上测试您的打字机文本，因为结果可能因平台而异。还要为依赖辅助技术的最终用户着想，最好运行一些可用性测试，以确保您没有让用户的生活变得困难。因为你可以用纯CSS做一些事情，并不一定意味着你应该这样做。如果打字机效果对您很重要，并且希望将其用于更关键的内容，那么至少也应该考虑JavaScript解决方案。

无论如何，我希望你喜欢这篇文章，并希望它能让你思考使用CSS动画可以做的其他有趣的事情，从而为你的web页面添加兴趣和乐趣。