用CSS来打造炫酷的打字机效果，让文字在网页上"跳动"！

前端

2023-07-13 09:07:29

用 CSS 创建酷炫的打字机效果

在网页上呈现文字的方式有很多种，而打字机效果无疑是最迷人的效果之一。它可以为文章、故事和任何其他文本内容增添一抹复古的魅力，让读者仿佛置身于一个老式的打字机时代。

在本教程中，我们将深入探讨如何使用 CSS 实现令人惊叹的打字机效果。我们将逐步分解每个步骤，并提供详细的代码示例，以便你轻松地将这一效果应用到你的网页中。

1. 添加元素

要创建打字机效果，我们需要在网页中添加一个元素来包含要应用效果的文字。这个元素可以是任何块级元素，例如

、

或

。为了简单起见，我们使用元素：

<span id="typewriter"></span>

2. 应用 CSS 样式

接下来，我们需要为元素添加 CSS 样式来定义打字机的视觉效果。以下是需要注意的几个关键属性：

字体： 选择一个类似打字机字符的字体，例如 Courier New。
字体大小和行高： 调整字体大小和行高，以创建打字机式的文字间距。
颜色： 使用黑色或深灰色作为文字颜色，以模仿打字机的墨水效果。
背景颜色： 设置一个白色或浅色背景，以营造纸张的效果。
边框： 添加一个细边框，以模仿打字机的边缘。

#typewriter {
  font-family: Courier New, monospace;
  font-size: 16px;
  line-height: 1.5em;
  color: #000;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ccc;
}

3. 实现文字动画

为了让文字像打字机一样逐字出现，我们需要添加一个 CSS 动画。该动画将使用 opacity 属性，从 0（完全透明）过渡到 1（完全不透明）。

#typewriter {
  animation: typewriter-text 5s steps(20, end) infinite;
}

@keyframes typewriter-text {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

4. 创建光标闪烁

真正的打字机都有一个闪烁的光标，我们可以使用 CSS ::after 伪元素来模拟这个效果。

#typewriter::after {
  content: "";
  animation: typewriter-cursor .5s steps(1, end) infinite;
}

@keyframes typewriter-cursor {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

5. 完整代码示例

将上述所有代码片段组合在一起，我们就得到了一个完整的 CSS 打字机效果：

<!DOCTYPE html>
<html>
<head>
  <style>
    #typewriter {
      font-family: Courier New, monospace;
      font-size: 16px;
      line-height: 1.5em;
      color: #000;
      background-color: #fff;
      padding: 10px;
      border: 1px solid #ccc;
    }
    
    #typewriter::after {
      content: "";
      animation: typewriter-cursor .5s steps(1, end) infinite;
    }
    
    @keyframes typewriter-text {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    @keyframes typewriter-cursor {
      0% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <span id="typewriter">这是一段使用 CSS 实现的打字机效果。</span>
</body>
</html>