无障碍动画 - 在浏览器中进行设计
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
欢迎参加我们的主持人 Una Kravets 的《Designing in the Browser》课程。在数字环境中,互动触摸非常有助于理解用户,但也可能让部分用户迷失方向,感到沮丧,这与预期的效果相反。
因此,让我们来谈一谈如何避免这种情况,以及如何确保添加可爱的动画 SVG 和按钮悬停功能,同时确保那些在看到大量动画时感到有点恶心的用户也能欣赏您的网站。我们将演示如何使用“prefers-reduced-motion”媒体查询来逐步增强网站动画效果,以及如何构建简单的“减少动画”开关。
链接:
在浏览器中设计 → https://goo.gle/2NeLxjI
订阅 Chrome Developers 频道 → https://goo.gle/ChromeDevs
arrow_back 返回到所有分集
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2020-09-28。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{
"lastModified": "最后更新时间 (UTC):2020-09-28。",
"confidential": False
}