DIY版“学打字动画”，内含10分钟教学！

前端

2024-02-20 23:57:59

打字动画：让你的网站文字栩栩如生

让文字生动起来

想象一下，当你访问一个网站时，文字内容不是一涌而出，而是像打字机一样，逐个字符地显现，仿佛有人正在用键盘输入它们。这种效果不仅引人入胜，而且可以为你的网站增添个性。

打字动画不仅限于单调的文本，它还可以用来创建生动的视觉效果，例如在页面加载时显示标题、高亮显示重要文本或展示一段引人入胜的故事。

实现打字动画的方式有多种，本文将介绍使用 CSS 和 JavaScript 的两种最流行的方法，并提供一个逐步指南和代码示例，帮助你轻松上手。

使用 CSS 实现打字动画

CSS（层叠样式表）是一种用于控制网站视觉外观的强大工具。使用 CSS 实现打字动画非常简单，只需几行代码即可。

设置动画属性

首先，为要添加动画的文本元素设置一个 animation 属性。这个属性的值是一个动画名称，例如 typing。

#text {
  animation: typing 1s ease-in-out infinite;
}

定义动画阶段

接下来，你需要定义 @keyframes 规则，并为动画的各个阶段指定样式。例如，可以在动画开始时将文本的 opacity 属性设置为 0，并在动画结束时将 opacity 属性设置为 1，这样就可以实现文本从透明到完全显示的过渡效果。

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

使用 JavaScript 实现打字动画

JavaScript 是一种更灵活的编程语言，它允许你实现更复杂的打字动画效果。

创建动画函数

首先，创建一个函数来控制动画的执行。这个函数可以接受一个字符串作为参数，并逐个字符地显示字符串中的每个字符。

function typeWriter(element) {
  const text = element.textContent;
  let index = 0;

  const interval = setInterval(() => {
    if (index < text.length) {
      element.textContent += text[index];
      index++;
    } else {
      clearInterval(interval);
    }
  }, 100);
}

应用动画函数

接下来，将这个函数应用到要添加动画的文本元素上。可以使用 addEventListener 方法来监听文本元素的 focus 事件，并在事件发生时触发动画函数。

const textElement = document.getElementById('text');
textElement.addEventListener('focus', () => {
  typeWriter(textElement);
});

逐步指南

为了帮助你更好地理解，这里提供一个逐步指南，演示如何使用 CSS 和 JavaScript 实现打字动画：

CSS 方法

在你的 HTML 代码中，添加一个文本元素，例如 <p id="text">This is a text</p>。
在你的 CSS 文件中，添加以下代码：

#text {
  animation: typing 1s ease-in-out infinite;
}

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

JavaScript 方法

在你的 HTML 代码中，添加一个文本元素，例如 <p id="text">This is a text</p>。
在你的 JavaScript 文件中，添加以下代码：

function typeWriter(element) {
  const text = element.textContent;
  let index = 0;

  const interval = setInterval(() => {
    if (index < text.length) {
      element.textContent += text[index];
      index++;
    } else {
      clearInterval(interval);
    }
  }, 100);
}

const textElement = document.getElementById('text');
textElement.addEventListener('focus', () => {
  typeWriter(textElement);
});