如何用css :target与动画制作跳转高亮

: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，可以让目标元素在页面跳转后短暂改变背景色或添加边框，吸引用户注意。

立即学习“前端免费学习笔记（深入）”；

示例代码：

无限画

千库网旗下AI绘画创作平台

43

查看详情

<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 之间较合适。
• 避免使用过于强烈的颜色干扰阅读。
• 可结合 :target0 做轻微放大或抖动增强提示感。

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