CSS + JS 轻松实现炫酷文本交替效果

2023-10-27 09:40:50

前言

文本交替是一种常见的动画效果，经常用于网站和应用程序中，为内容增添趣味性和吸引力。实现文本交替有许多不同的方法，本文将重点介绍如何使用 CSS 和 JavaScript 来实现这一效果。

实现步骤

准备 HTML 代码

首先，我们需要创建一个简单的 HTML 文档，其中包含要交替显示的文本内容。例如，可以创建以下 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>文本1</h1>
  <h1>文本2</h1>
  <script src="script.js"></script>
</body>
</html>

编写 CSS 样式

接下来，我们需要使用 CSS 来定义文本交替效果的样式。可以添加以下 CSS 代码：

h1 {
  display: inline-block;
  animation: fadeInOut 10s infinite alternate;
}

@keyframes fadeInOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

在这段 CSS 代码中，我们首先将 <h1> 元素设置为内联块元素，以便它们能够并排显示。然后，我们使用 animation 属性定义了名为 fadeInOut 的动画，该动画将在 10 秒内无限次地重复交替执行淡入和淡出效果。最后，我们使用 @keyframes 规则定义了 fadeInOut 动画的关键帧，指定了动画在不同时间点的样式。

编写 JavaScript 代码

最后，我们需要使用 JavaScript 来控制文本交替的效果。可以添加以下 JavaScript 代码：

// 获取要交替的文本元素
var texts = document.querySelectorAll('h1');

// 设置交替的间隔时间
var interval = 1000; // 1 秒

// 创建一个循环函数，每隔一段时间交替文本
function alternateTexts() {
  // 获取当前显示的文本元素
  var currentText = document.querySelector('h1:not(.hidden)');

  // 获取下一个要显示的文本元素
  var nextText = currentText.nextElementSibling;

  // 如果没有下一个文本元素，则返回第一个文本元素
  if (!nextText) {
    nextText = texts[0];
  }

  // 淡出当前显示的文本元素
  currentText.classList.add('hidden');

  // 淡入下一个要显示的文本元素
  nextText.classList.remove('hidden');

  // 每隔一段时间重复交替文本
  setTimeout(alternateTexts, interval);
}

// 启动文本交替
alternateTexts();

在这段 JavaScript 代码中，我们首先获取要交替的文本元素。然后，我们设置交替的间隔时间。接下来，我们创建了一个循环函数 alternateTexts()，该函数每隔一段时间就会交替文本。在函数中，我们获取当前显示的文本元素和下一个要显示的文本元素。然后，我们淡出当前显示的文本元素，淡入下一个要显示的文本元素。最后，我们每隔一段时间重复调用 alternateTexts() 函数，从而实现文本交替的效果。

技巧和最佳实践

在实现文本交替效果时，可以考虑以下技巧和最佳实践：

使用合适的动画时间 ：动画时间应该与文本内容的长度和复杂程度相匹配。如果动画时间太短，用户可能无法看清文本内容。如果动画时间太长，用户可能会感到厌烦。
选择合适的动画效果 ：除了淡入淡出效果外，还有许多其他动画效果可供选择，例如滑动、旋转、缩放等。您可以根据自己的喜好和项目的具体要求选择合适的动画效果。
确保文本可读性 ：文本交替效果不应该影响文本的可读性。在选择动画效果时，应确保文本始终清晰可见，用户能够轻松阅读。
注意移动设备的兼容性 ：如果您的网站或应用程序需要在移动设备上运行，则需要确保文本交替效果在移动设备上能够正常显示和运行。