代码、数据与二维码工具

CSS 滚动动画生成器

选择效果、距离、时长和缓动,生成无 JavaScript 时仍可见并遵守减少动态偏好的 CSS。

优先本地处理无需注册隐私说明 ↗

选择数值后生成。 本地生成;没有 JavaScript 时回退状态仍可见。

使用步骤

如何使用

  1. 选择效果和范围受限的数值。
  2. 复制生成的 CSS 和可选观察器脚本。
  3. 将类名添加到元素,并测试键盘及减少动态效果。

有界输出

数值会限制在安全范围内,生成文本最多 200 个字符,便于复制和嵌入。

渐进增强

没有 JavaScript 或 IntersectionObserver 时元素保持可见;支持时进入视口后播放一次。

动态效果偏好

prefers-reduced-motion 规则会关闭过渡并保持元素可见。

常见问题

你可能还想知道

需要库吗?

不需要。支持时使用 CSS 和浏览器 IntersectionObserver API。

没有 JavaScript 会怎样?

元素默认可见,因此会保持显示。

能用于重复卡片吗?

可以。给每个元素添加生成的类名,它们会分别显示。