: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 场景，让用户清楚知道跳转到了哪里。不复杂但容易忽略的小技巧。
