交替文本

创建一个交替文本动画。

• 为将要交替的文本创建一个 <span> 元素。
• 定义一个名为 alternating-text 的动画，通过设置 display: none 使 <span> 元素消失。
• 在 JavaScript 中，定义一个包含不同单词的数组，用第一个单词初始化 <span> 元素的内容。
• 使用 EventTarget.addEventListener() 为 'animationiteration' 事件定义一个事件监听器。这将在动画的每次迭代完成时运行事件处理程序。
• 使用 Element.innerHTML 将数组中的下一个元素显示为 <span> 元素的内容。

<p>我喜欢编程使用的语言是 <span class="alternating" id="alternating-text"></span>。</p>

.alternating {
  animation-name: alternating-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes alternating-text {
  90% {
    display: none;
  }
}

const texts = ['Java', 'Python', 'C', 'C++', 'C#', 'Javascript'];
const element = document.getElementById('alternating-text');

let i = 0;
const listener = e => {
  i = i < texts.length - 1 ? i + 1 : 0;
  element.innerHTML = texts[i];
};

element.innerHTML = texts[0];
element.addEventListener('animationiteration', listener, false);