CSS:target实现页面跳转高亮效果

利用CSS `:target` 伪类结合动画，无需JavaScript即可实现页面跳转后的高亮效果，显著提升用户体验。本文深入解析 `:target` 的工作原理，即当URL中的片段标识符与页面元素的ID匹配时，该元素便被选中并触发预设的CSS动画。通过示例代码，展示如何使用 `@keyframes` 定义背景色渐变等动画效果，实现目标元素短暂高亮，引导用户快速定位。此外，还提供了一系列优化建议，包括设置 `scroll-margin-top` 避免遮挡、控制动画时长与颜色强度，以及运用 `transform` 增强视觉提示。该技术尤其适用于文档、FAQ等场景，为网站导航带来更友好的互动体验。

:target 伪类可在用户点击锚点链接时高亮目标元素，通过 CSS 动画实现无 JavaScript 的视觉反馈。当 URL 的片段标识符指向某 id，该元素即被 :target 选中并触发动画，如背景色由黄渐变为白，持续约1秒，提示用户当前定位位置。示例中 .highlight 元素结合 @keyframes 定义闪烁效果，优化建议包括设置 scroll-margin-top 防遮挡、控制动画时长与颜色强度，并可添加轻微 transform 增强提示。此技术适用于文档、FAQ 等场景，提升导航体验。

当用户点击链接跳转到页面某个锚点时，可以通过 :target 伪类配合 CSS 动画，让目标元素短暂高亮显示，提升用户体验。这种方法无需 JavaScript，纯 CSS 即可实现。

:target 是什么？

当 URL 的片段标识符（即 # 后面的部分）指向页面中的某个元素的 id 时，该元素就处于“目标状态”，:target 选择器就会匹配这个元素。

例如，访问 page.html#section1，那么 #section1 元素就会被 :target 选中，可以对其设置特殊样式。

实现跳转后高亮动画

利用 :target 和 @keyframes，可以让目标元素在页面跳转后短暂改变背景色或添加边框，吸引用户注意。

示例代码：

<style>
  .highlight {
    transition: background-color 0.3s;
  }
<p>.highlight:target {
animation: highlight-animation 1s ease-out;
}</p><p>@keyframes highlight-animation {
0% {
background-color: yellow;
padding: 10px;
}
100% {
background-color: white;
padding: 0;
}
}
</style></p><p><h2 id="section1" class="highlight">章节一</h2>
<p>这里是章节一的内容...</p></p><p><a href="#section1">跳转到章节一并高亮</a></p>

说明：

• 元素添加了类名 highlight，用于绑定动画样式。
• 当该元素成为目标（URL 中有 #section1），:target 触发动画。
• 动画从亮黄色背景开始，逐渐恢复为无背景，模拟“闪烁高亮”效果。

优化建议与注意事项

为了更好的视觉效果和兼容性，可以考虑以下几点：

• 使用 scroll-margin-top 避免锚点被固定头部遮挡。
• 动画时间不宜过长，0.5s 到 1s 之间较合适。
• 避免使用过于强烈的颜色干扰阅读。
• 可结合 transform 做轻微放大或抖动增强提示感。

基本上就这些。用 :target 实现跳转高亮简单有效，适合文档、帮助页面或 FAQ 场景，让用户清楚知道跳转到了哪里。不复杂但容易忽略的小技巧。

好了，本文到此结束，带大家了解了《CSS:target实现页面跳转高亮效果》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！