构建一个文字闪烁效果

在这个新教程中，我们将学习如何使用 CSS 动画和一些 JavaScript 创建无限闪烁/闪烁的文本效果。具体来说，选定的文本部分将在一段时间后改变颜色。之后，动画将重新初始化。 

1. 从 HTML 标记开始

在容器内部，我们将定义一个包装元素，其中包含一些知名品牌的文本，如下所示：

<div class="container">
  <div class="blinking-wrapper">
    Accenture,
    Amazon
    Apple,
    Astrazeneca,
    Citigroup,
    Coca-Cola Co,
    *** Merchants ***,
    Disney
    Google,
    ...
  </div>
</div>

对于我们想要制作动画的每个品牌（一段文本），我们将其包装在一个span元素内并为其赋予data-number属性。自定义属性的值将决定动画顺序。数字越小，动画运行得越快。也就是说，具有data-number="1"属性值的元素将首先被动画化，然后是具有data-number="2"属性值的元素，依此类推。

这是所需的标记骨架：

<div class="container">
  <div class="blinking-wrapper">
    Accenture,
    Amazon
    Apple,
    Astrazeneca,
    Citigroup,
    <span data-number="1">Coca-Cola Co</span>,
    *** Merchants ***,
    Disney
    Google,
    IBM,
    <span data-number="2">Intel</span>,
    JPMorgan Chase,
    Mastercard,
    McDonalds,
    Meta,
    NASA,
    <span data-number="4">Nestle SA</span>,
    Netflix,
    Nike,
    ...
  </div>
</div>

2. 添加CSS

CSS 非常基础。我们需要做的就是对 s 应用 CSS 动画，span将其颜色从白色更改为我们选择的颜色。但请注意一件事：页面加载时动画将按顺序运行。此时，我们将把blinking类添加到包装器中并给予span适当的延迟。

在您的情况下，根据页面布局，您可能希望在.blinking-wrapper元素进入视图时启动闪烁效果。 

以下是所有样式：

/*CUSTOM VARIABLES HERE*/
.container {
  max-width: 1600px;
  padding: 0 15px;
  margin: 0 auto;
}
.blinking-wrapper {
  font-size: 50px;
}
.blinking-wrapper.blinking [data-number] {
  animation: changeColor 1.5s var(--delay, 0s);
}
@keyframes changeColor {
  to {
    color: var(--green);
  }
}
@media (max-width: 600px) {
  .blinking-wrapper {
    font-size: 25px;
  }
}

3. 应用 JavaScript

如上所述，除了在blinking页面加载时将类添加到包装元素之外，我们还将为每个类分配适当的延迟，span以确定它们的闪烁动画何时开始。第一个元素不会有任何延迟。一旦前一个动画元素的动画完成，所有其他元素都会触发。

当然，您可以手动设置延迟或根据需要调整时间。 

这是所需的 JavaScript 代码：

const blinkingWrapper = document.querySelector(".blinking-wrapper");
const animatedEls = blinkingWrapper.querySelectorAll("[data-number]");
const TOGGLE_CLASS = "blinking";
const BASE_DELAY = 1.5;
window.addEventListener("load", function () {
  blinkingWrapper.classList.add(TOGGLE_CLASS);
  animatedEls.forEach(function (el, index) {
    if (index != 0) {
      const delay = BASE_DELAY * el.dataset.number - BASE_DELAY;
      el.style.setProperty("--delay", `${delay}s`);
    }
  });
});

重播动画

使用此代码后，我们的动画将按预期播放一次。但是，如果我们想无限地按顺序重播它们（保持所需的延迟）怎么办？仅使用动画迭代计数infinite关键字是行不通的。

在这种情况下，我们将等待所有动画完成，然后使用animationend最后一个动画元素（具有最大data-number.查找该元素的快速方法是手动为其指定唯一的 ID/类。或者，我们可以编写一些代码来从所有属性值中检索最大的数字，data-number如下所示：

...
function getMaxNumber() {
  const numbers = Array.from(animatedEls).map(function (el) {
    return el.dataset.number;
  });
  return Math.max(...numbers);
}

接下来，我们将定位所需的元素并***其animationend事件。

...
blinkingWrapper
  .querySelector(`[data-number="${getMaxNumber()}"]`)
  .addEventListener("animationend", function () {
    //stuff here 
  });

在其中，我们将做三件事：

• blinking从包装元素中删除该类。

• 通过计算该元素的高度或任何使其回流而不返回任何内容的内容来强制回流该元素。

• 再次blinking向其中添加类。 

这样，CSS 动画将在每次前一组动画完成时恢复并延迟到位。如果我们不引起回流，我们的动画将不会重新启动。您可以通过删除回流操作进行测试。

这是所需的 JavaScript 代码：

...
blinkingWrapper
  .querySelector(`[data-number="${getMaxNumber()}"]`)
  .addEventListener("animationend", function () {
    blinkingWrapper.classList.remove(TOGGLE_CLASS);
    void blinkingWrapper.offsetHeight;
    blinkingWrapper.classList.add(TOGGLE_CLASS);
  });

另一种实现方式是，在尽可能短的延迟之后将类附加到包装器，而不是强制进行回流（根据您的布局，回流可能会很昂贵），通过给出零延迟，我们将让浏览器决定最短延迟时间：

...
blinkingWrapper
  .querySelector(`[data-number="${getMaxNumber()}"]`)
  .addEventListener("animationend", function () {
    blinkingWrapper.classList.remove(TOGGLE_CLASS);
    setTimeout(function () {
      blinkingWrapper.classList.add(TOGGLE_CLASS);
    }, 0);
  });

除了这里讨论的这些方法之外，还有其他方法。如果您使用任何其他工具来完成类似的事情，请随时在X上或在演示评论中告诉我们！

结论

 在本教程中，借助该事件，我们成功构建了具有令人惊叹的动画的无限闪烁 CSS 效果animationend 。如果您想突出显示文本的特定部分（例如最新项目、顶级客户、顶级技能等），这种效果非常有用。

这又是我们的效果：

See the Pen  Build an Infinite Blinking Text Animation With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus)  on CodePen.

一如既往，非常感谢您的阅读！