快速浏览要点:
@scroll-timeline
。Bramus 也向我们展示了此功能在 CSS-Tricks 上的强大用途,尤其是在与 WAAPI 结合使用时。prefers-reduced-motion
使用 CSS Scroll-Timeline我唯一要补充的是,需要考虑 prefers-reduced-motion
属性,因为这种滚动动画可能会影响容易晕动的人。为此,您可以将测试与 JavaScript 中的支持测试结合在同一行:
if ( !CSS.supports("animation-timeline: foo") && !window.matchMedia('(prefers-reduced-motion: reduce)').matches ) { // 执行炫酷效果 }
我不确定最好是测试无偏好设置还是 reduce
的反面。无论哪种方式,CSS 中的技巧是将您要使用 @scroll-timeline
和 animation-timeline
执行的任何操作都包装在 @supports
测试中(如果您想执行其他操作),然后将 该测试 包装在偏好设置测试中:
@media (prefers-reduced-motion: no-preference) { @supports (animation-timeline: works) { /* 执行炫酷效果 */ } }
这是一个演示,所有功劳都归于 Bramus,是他让这一切得以实现。
哦,你知道吗?如果 @when
成为一项功能,CSS 会变得更简洁:
@when supports(animation-timeline: works) and media(prefers-reduced-motion: no-preference) { } @else { }
以上是CSS滚动式式运动偏爱的详细内容。更多信息请关注PHP中文网其他相关文章!