CSS prefers-reduced-motion

减少 CSS 中的动画效果,是不是很简单理解?

这是 media query 的一种,是判断用户的游览器有被设置才会有效果,所有游览器都支持(除了 IE)

是 Media Queries Level 5,Editor's Draft(但是所有游览器都支持咯)

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none; 当用户游览器设置后,将会启动这个
  }
}

 

Link: 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media/prefers-reduced-motion

https://web.dev/prefers-reduced-motion/

posted @ 2021-04-24 11:45  泉油  阅读(292)  评论(0编辑  收藏  举报
Web Design Johor Bahru Malaysia - Stooges