巧妙实现卡片无限滚动动画：打造视觉盛宴

2023-12-13 12:50:06

卡片无限滚动动画：为您的网站增添动态魅力

概要

卡片无限滚动动画是网页设计中一种令人惊叹的技术，可以赋予您的网站一种引人注目的动态感。通过巧妙地运用动画和重置技巧，您可以创造出一种错觉，让卡片在屏幕上无缝滚动，仿佛置身于一个不断变化的画卷中。在本指南中，我们将逐步探讨如何实现这种令人惊叹的动画效果。

动画的关键帧

动画的关键帧定义了卡片在动画过程中移动的点。您可以使用 CSS @keyframes 规则来指定这些关键帧。例如：

@keyframes card-animation {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100vh);
  }
}

在这个例子中，我们定义了一个关键帧，将卡片从顶部垂直移动到屏幕底部。根据您的设计要求，您可以调整关键帧以创建不同的移动路径。

将动画应用到卡片

一旦定义了关键帧，就可以使用 CSS animation 属性将动画应用到卡片元素上。语法如下：

.card {
  animation: card-animation 10s infinite;
}

这将使 .card 类中的所有卡片元素执行 card-animation 动画，持续时间为 10 秒，并无限循环。根据需要，您可以调整动画的持续时间和迭代次数。

重置动画

为了使卡片在到达屏幕底部后重新从顶部出现，我们需要重置动画。可以使用 JavaScript animationiteration 事件来实现。该事件在动画完成一个完整循环时触发。以下是重置代码示例：

const cards = document.querySelectorAll('.card');

cards.forEach((card) => {
  card.addEventListener('animationiteration', () => {
    card.style.animation = 'none';
    card.style.transform = 'translateY(0)';
    setTimeout(() => {
      card.style.animation = 'card-animation 10s infinite';
    }, 100);
  });
});