CSS——文字打字机效果

本文通过纯 CSS 实现文字的打字机效果，然后借助 JS 实现了扩展。

typewriter

基本思路

使用伪元素覆盖原文字，并且使用伪元素模拟闪烁的光标效果。

具体流程

首先是一些基本的设置

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字打字机效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      /* 防止宽度过小,导致 h1的宽度与视口的最小宽度一致,以至于效果出现差错 */
      min-width: fit-content;
      width: 100vw;
      height: 100vh;
      background-color: hsl(280, 50%, 30%);
      display: flex;
      justify-content: center;
      align-items: center;
      /* 设置等宽字体 */
      font-family: monospace;
      /* 不要滚动条 */
      overflow: hidden;
    }


    #h1 {
      position: relative;
      color: #fff;
      text-align: center;
      font-size: 2.5rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      /* 防止文字换行 */
      text-wrap: nowrap;
      /* 加载完成之后隐藏后面的输入 */
      overflow: hidden;
    }
    
    #h1::before,
    #h1::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: hsl(280, 50%, 30%);
    }
  </style>
</head>

<body>
  <h1 id="h1">I'm lazy-sheep-king!</h1>
</body>

</html>

#h1::before 遮住原文字，然后设置关键帧逐步显示，#h1::after 用于表示光标。
这里有一些需要注意的点：
首先是 body 设置为 min-width: fit-content;，这里是防止缩放视口导致视口宽度小于原来文本的宽度时，文本的宽度也会跟着缩小为视口的宽度；
然后是设置等宽字体 font-family: monospace;，这个是关键，每一步的步长就是每个字母的宽度；
此外是 h1 标签的 ext-wrap: nowrap;，这里是防止宽度过小导致文字换行；
最后是 h1 标签的 overflow: hidden;，这个可有可无，如果加上，那么最后的光标就会隐藏，如果不加，那么文字加载完成之后的光标就会继续闪烁。

设置关键帧

首先设置移动关键帧：

#h1::before {
  animation: typewriter 5s steps(20) forwards;
}

#h1::after {
  width: 5px;
  border-radius: 1em;
  background-color: hsl(60, 100%, 35%);
  animation: typewriter 5s steps(20) forwards
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

首先解释 steps(20)，效果为该动画分为多少步完成，一步一顿，因为有20个字符，所有就分为20步完成。
然后是 animation-fill-mode: forwards，这个是动画结束之后，元素的状态，这里停留到最后一帧。

设置光标闪烁帧

#h1::after {
  width: 5px;
  border-radius: 1em;
  background-color: hsl(60, 100%, 35%);
  animation: typewriter 5s steps(20) forwards,
    flashing 0.25s infinite alternate;
}

@keyframes flashing {
  to {
    opacity: 0;
  }
}

通过改变透明度，表示光标的闪烁效果。
同一个元素可以添加多个动画效果，用逗号“,”隔开。

扩展性

为了增强扩展性，可以使用js进行一些处理。

<script>
  // 获取标签
  const h1 = document.querySelector('#h1');
  // 获取文本长度
  const length = h1.innerHTML.length;
  // 使用自定义属性变量传递到 CSS中
  h1.style.setProperty('--length', length);
</script>

这样我们动态计算文本的长度，并使用自定义属性变量传递到 CSS中，将steps(20)中的参数换位var(--length)，但需要注意的是，即使是等宽的字体，其中文和英文的宽度还是有区别的，这里仅考虑为纯英文或纯中文的情况（如果中英文混合的话，可以考虑使用<span>标签包裹每个单独的单词/汉字，然后设置统一的宽度，最后使用js添加与计算）。

结语

创作不易，谢谢支持；如有错误，恳请指出，希望与大家共同进步！

源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文字打字机效果</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      /* 防止宽度过小,导致 h1的宽度与视口的最小宽度一致,然后使效果出现差错 */
      min-width: fit-content;
      width: 100vw;
      height: 100vh;
      background-color: hsl(280, 50%, 30%);
      display: flex;
      justify-content: center;
      align-items: center;
      /* 设置等宽字体 */
      font-family: monospace;
      /* 不要滚动条 */
      overflow: hidden;

    }


    #h1 {
      position: relative;
      color: #fff;
      text-align: center;
      font-size: 2.5rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      /* 防止文字换行 */
      text-wrap: nowrap;
      /* 加载完成之后隐藏后面的输入 */
      overflow: hidden;
    }

    #h1::before,
    #h1::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background-color: hsl(280, 50%, 30%);
    }

    #h1::before {
      animation: typewriter 5s steps(20) forwards;
    }

    #h1::after {
      width: 5px;
      border-radius: 1em;
      background-color: hsl(60, 100%, 35%);
      animation: typewriter 5s steps(20) forwards,
        flashing 0.25s infinite alternate;
    }

    @keyframes typewriter {
      to {
        left: 100%;

      }
    }

    @keyframes flashing {
      to {
        opacity: 0;
      }
    }
  </style>
</head>

<body>
  <h1 id="h1">I'm lazy-sheep-king!</h1>
  <script>
    // 获取标签
    const h1 = document.querySelector('#h1');
    // 获取文本长度
    const length = h1.innerHTML.length;
    // 使用自定义属性变量传递到 CSS中
    h1.style.setProperty('--length', length);
    console.log(length);
  </script>
</body>

</html>