: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，可以让目标元素在页面跳转后短暂改变背景色或添加边框，吸引用户注意。
立即学习“前端免费学习笔记（深入）”；
示例代码：
Revid AI
AI短视频生成平台
96 查看详情
.highlight { transition: background-color 0.3s; }.highlight:target {animation: highlight-animation 1s ease-out;}
@keyframes highlight-animation {0% {background-color: yellow;padding: 10px;}100% {background-color: white;padding: 0;}}
章节一
这里是章节一的内容...
说明：
元素添加了类名 highlight，用于绑定动画样式。当该元素成为目标（URL 中有 #section1），:target 触发动画。动画从亮黄色背景开始，逐渐恢复为无背景，模拟“闪烁高亮”效果。
优化建议与注意事项
为了更好的视觉效果和兼容性，可以考虑以下几点：
使用 scroll-margin-top 避免锚点被固定头部遮挡。动画时间不宜过长，0.5s 到 1s 之间较合适。避免使用过于强烈的颜色干扰阅读。可结合 transform 做轻微放大或抖动增强提示感。
基本上就这些。用 :target 实现跳转高亮简单有效，适合文档、帮助页面或 FAQ 场景，让用户清楚知道跳转到了哪里。不复杂但容易忽略的小技巧。
以上就是如何用css :target与动画制作跳转高亮的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1040807.html
微信扫一扫 
支付宝扫一扫 
