CSS 滚动动画生成器
选择效果、距离、时长和缓动,生成无 JavaScript 时仍可见并遵守减少动态偏好的 CSS。
选择数值后生成。 本地生成;没有 JavaScript 时回退状态仍可见。
使用步骤
如何使用
- 选择效果和范围受限的数值。
- 复制生成的 CSS 和可选观察器脚本。
- 将类名添加到元素,并测试键盘及减少动态效果。
有界输出
数值会限制在安全范围内,生成文本最多 200 个字符,便于复制和嵌入。
渐进增强
没有 JavaScript 或 IntersectionObserver 时元素保持可见;支持时进入视口后播放一次。
动态效果偏好
prefers-reduced-motion 规则会关闭过渡并保持元素可见。
常见问题
你可能还想知道
需要库吗?
不需要。支持时使用 CSS 和浏览器 IntersectionObserver API。
没有 JavaScript 会怎样?
元素默认可见,因此会保持显示。
能用于重复卡片吗?
可以。给每个元素添加生成的类名,它们会分别显示。