CSS如何让带有特定的hash跳转展现瞬间高亮闪烁

需用JS监听hashchange，在滚动完成后添加一次性高亮动画class：先setTimeout(fn,0)等待滚动结束，再querySelector目标元素并添加带@keyframes的唯一class（如含时间戳），动画用box-shadow实现闪烁效果，结束后立即remove。 hash跳转后怎么让目标元素立刻高亮 浏览器原生 hash 跳转不会触发任何样式变化， 更新后，滚动完成、DOM 已就位，但你没法靠 CSS :target 自动加动画——因为 :target 本身不支持 transition 或 animation 触发。 必须用 JS 捕获 hashchange 或在页面加载后手动触发一次高亮逻辑。 监听 事件，拿到 后用 找对应元素 别依赖 单次执行——用户可能点链接、前进/后退、手动改地址栏，都得响应 记得检查元素是否存在， 可能返回 ，避免 报错 用 CSS 动画实现“闪烁”效果而不是简单变色 单纯加个 background-color 不够醒目，用户可能没注意到滚动停在哪。真正有效的“瞬间高亮”需要视觉暂留感：比如淡入 + 背景闪黄 + 0.3 秒后自动淡出。 关键不是加 class，而是加一个带 的一次性动画 class，且必须确保每次触发都是“新动画”，否则浏览器会跳过重复播放。 立即学习 “ 前端免费学习笔记（深入） ”； 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载 动画 class 名要唯一（比如拼上时间戳或随机数），或每次添加前先 再 动画结束后立即 该 class，避免干扰后续样式或重绘 推荐用 或 闪，比改 更不影响原有布局 为什么 setTimeout(fn, 0) 经常被用来“等滚动结束” hash 跳转后， 或浏览器自动滚动是异步的，立刻查 可能还是旧位置。但你不该监听 scroll 事件做防抖——太重，也容易漏掉。 是最轻量的“让出主线程，等浏览器做完滚动渲染”的方式。现代浏览器中，0ms 并不真等 0ms，而是排到当前任务队列末尾，刚好卡在滚动完成之后。 不要用 ——它在重绘前执行，此时滚动可能还没到位 别设成 或 ，数字越大越不可控； 就够，语义清晰 如果页面有复杂滚动逻辑（如自定义 smooth scroll），就得换方案：监听 （Chrome 113+）或 fallback 到 + 防抖 兼容性与性能要注意的细节 老浏览器（IE、旧版 Safari）不支持 、 ，也不支持 事件在某些情况下触发。但高亮闪烁本身对兼容性要求不高——只要 class 能加、动画能播就行。 动画用 或 最安全，避免触发布局重排（reflow） 别在高亮逻辑里调用 或遍历大量节点，hashchange 频繁时会卡顿 移动端 Safari 对 hashchange 响应有时延迟，可加一层 手动比对，避免重复执行 实际中最容易被忽略的是：动画 class 必须在滚动完成后再加，否则会出现在屏幕外闪一下，或者根本看不到。这个时机差几毫秒，效果就全废。