CSS 实现自动无限滚动 + 悬停停止滚动效果，酷炫无比！

2023-04-22 07:05:24

CSS 动画滚动：提升用户体验的进阶指南

CSS 动画滚动效果 是一种利用 CSS 的 animation 属性为您的网站增添动感和活力的手法。掌握这种技巧，您就能实现自动滚动、无限滚动和悬浮停止滚动等酷炫效果，提升用户浏览体验。

自动滚动

自动滚动效果 使元素沿着指定路径持续运动，无需任何用户交互。通过设置 animation-name、animation-duration 和 animation-iteration-count 等属性，您可以控制动画名称、持续时间和重复次数。

@keyframes my-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}

.element {
  animation-name: my-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

无限滚动

无限滚动效果 让滚动内容循环播放，营造无缝的浏览体验。关键在于将 animation-iteration-count 属性设置为 infinite，从而让动画不断重复。

@keyframes my-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}

.element {
  animation-name: my-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

悬浮停止滚动

悬浮停止滚动效果 让自动滚动内容在用户悬停时暂停，为交互体验增添人性化元素。通过设置 animation-play-state 属性为 paused，您可以暂停动画播放。

@keyframes my-animation {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100px); }
}

.element {
  animation-name: my-animation;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

.element:hover {
  animation-play-state: paused;
}