本文详解如何使用纯 css 实现图片上可定位的悬浮标注点，支持悬停放大、动态显示连接线，并精准锚定图像关键区域，无需 javascript 即可完成响应式交互效果。
本文详解如何使用纯 css 实现图片上可定位的悬浮标注点，支持悬停放大、动态显示连接线，并精准锚定图像关键区域，无需 javascript 即可完成响应式交互效果。
在产品展示、UI 教程或数据可视化场景中，常需在静态图片上添加“可交互标注点”——鼠标悬停时高亮目标区域、弹出提示线，并联动视觉反馈。本教程提供一种零 JS、纯 CSS 驱动的实现方案，兼顾语义清晰性与性能轻量性。
核心思路
- 使用 background-image 渲染底图，确保图像尺寸可控、缩放稳定；
- 通过绝对定位的 .dome-icon 元素模拟“标注点”，其位置由 transform: translate(x, y) 精确锚定到图像坐标；
- 悬停时利用 :hover::after 伪元素绘制连接线（水平/倾斜均可），配合 opacity 和 transition 实现淡入动画；
- 圆点图标使用 <img> 内嵌，配合 scale 和 border-radius: 50% 实现平滑放大与圆形裁切。
完整示例代码
<div class="dome">
<div class="dome-icon">
<img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Feature A">
</div>
<div class="dome-icon">
<img src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png" alt="Feature B">
</div>
</div>.dome {
background: url(https://www.zdnet.com/a/img/resize/ba1b1ab92085d777ab5e313b34c66a94b7aa1236/2023/06/05/79a43eb8-ce38-488c-8cc0-e04699aaca7f/bing.jpg) center/cover no-repeat;
height: 200px;
width: 200px;
margin: 0 auto;
position: relative; /* 关键：为子元素绝对定位提供参考 */
}
.dome-icon {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
cursor: pointer;
animation: pulses 2s infinite;
}
.dome-icon img {
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.5s ease;
}
.dome-icon:hover img {
transform: scale(1.2);
}
.dome-icon::after {
content: '';
position: absolute;
height: 2px;
background: #ffd503;
opacity: 0;
transition: opacity 0.3s, width 0.3s;
}
.dome-icon:hover::after {
opacity: 1;
width: 210px;
}
/* 第一个标注点：居中水平连线 */
.dome-icon:nth-child(1) {
transform: translate(-113px, 61px); /* 相对父容器左上角偏移 */
}
.dome-icon:nth-child(1)::after {
top: 50%;
left: 42px;
}
/* 第二个标注点：倾斜向上连线 */
.dome-icon:nth-child(2) {
transform: translate(-120px, 132px);
}
.dome-icon:nth-child(2)::after {
top: 0;
left: 42px;
transform: rotate(-10deg);
transform-origin: left center;
}注意事项与优化建议
- ✅ 定位精度：transform: translate() 值需根据实际图片尺寸和目标坐标反复调试；推荐先用开发者工具临时添加 outline: 1px solid red 辅助对齐。
- ✅ 可访问性：为每个 .dome-icon 添加 alt 属性（如示例所示），并考虑后续接入 aria-label 或 title 提升无障碍体验。
- ⚠️ 响应式适配：当前方案基于固定宽高（200×200px）。若需适配不同屏幕，建议改用 background-size: contain + aspect-ratio，并结合 calc() 动态计算 translate 偏移值。
- ? 扩展性提示：如需添加文字气泡，可在 .dome-icon:hover::before 中插入内容，并用 position: absolute 定位于连线末端。
该方案简洁、高效、无依赖，是快速构建图像交互标注的理想起点。掌握定位逻辑与伪元素动画组合后，可轻松扩展至多点、多线、甚至 SVG 路径连接等进阶场景。
