用CSS实现文字打字动画（+1白话讲解）

2023-11-27 15:13:09

前言

很多时候，我们都会有一些奇怪的骚想法，比如让网页中的一些特定文本像敲代码一样一个一个显示出来，有一种命令行的感觉，增加设计感，很多人觉得这个效果要用很长一段JS来实现.... 正好手头有个例子，我决定用CSS实验一下看起来还不错，但是还不够，我们希望字符能一个一个出来，想了想，插入这个animation-delay ，属性指定了动画开始的延迟时间，如果我们需要依次显示不同文字块的话，那么我们可以将animation-delay设置为0s, 0.2s, 0.4s, 0.6s, 0.8s, 1s，这样字就可以像打字机一样一个一个的输出来。

实现步骤

HTML结构
首先，我们需要在HTML中创建一个<div>元素来容纳我们的文本。

<div id="text-container">
  <h1>我是标题</h1>
  <p>我是段落内容。</p>
</div>

CSS样式
接下来，我们需要使用CSS来为<div>元素添加打字动画效果。

#text-container {
  font-family: Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5em;
  color: #333;
  animation: type 1s steps(20, end) forwards;
}

@keyframes type {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在这个CSS代码中，我们使用animation属性来创建动画，并指定了动画的名称、持续时间、步骤数和方向。steps()函数定义了动画的步骤，第一个参数指定了步骤的总数，第二个参数指定了动画结束时的步骤。forwards属性指定了动画在结束后保持最终状态。

应用动画
最后，我们需要将动画应用到<div>元素上。我们可以通过在<div>元素上添加class属性来实现。

<div id="text-container" class="animated">
  <h1>我是标题</h1>
  <p>我是段落内容。</p>
</div>

现在，我们的文本将以打字动画的形式显示。

示例代码

<!DOCTYPE html>
<html>
<head>
  
  <style>
    #text-container {
      font-family: Arial, sans-serif;
      font-size: 20px;
      line-height: 1.5em;
      color: #333;
      animation: type 1s steps(20, end) forwards;
    }

    @keyframes type {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
</head>
<body>
  <div id="text-container">
    <h1>我是标题</h1>
    <p>我是段落内容。</p>
  </div>
</body>
</html>