纯CSS实现地图标记光圈扩散效果

最新推荐文章于 2024-08-30 05:12:30 发布

marsur

最新推荐文章于 2024-08-30 05:12:30 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签： css html

本文链接：https://blog.csdn.net/marsur/article/details/119995953

版权

本文介绍了如何使用CSS和HTML在地图上创建具有光圈扩散效果的标记点，并在鼠标悬浮时显示文字标签。文章讨论了存在的问题——光圈交叉重叠导致的悬浮目标不准确，并提出了通过缩小光圈来临时解决该问题的方法。

摘要由CSDN通过智能技术生成

给地图上定位的多个点添加光圈扩散效果，光圈由小变大，颜色由深色过渡到浅色。

效果图

html代码

<div class="map-bg">
    <p class="region-item">
        <span class="region-spot">●</span>
    </p>

    <p class="region-item">
        <span class="region-spot">●</span>
    </p>

    <p class="region-item">
        <span class="region-spot">●</span>
    </p>

</div>

css代码

/*地图背景*/
.map-bg{
    background: url(/wp-content/uploads/2021/08/about-us-map.png);
    background-size: cover;
    height: 455px;
    width: 854px;
    margin: 50px auto;
    position: relative;
}
/*地图标记外层容器*/
.map .region-item{
    p