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

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

效果图

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{
    position: absolute;
    left: 14%;
    bottom: 49%;
    width: 148px;
    cursor: pointer;
}
.map .region-item:nth-child(2){
    width: 322px;
    left: 60%;
    bottom: 43%;
}
.map .region-item:nth-child(3){
    left: 73.2%;
    bottom: 53.3%;
}
/*地图标记圆点*/
.map .region-item .region-spot{
    display: inline-flex;
    color: #00a0e9;
    justify-content: center;
    align-items: center;
    line-height: 110%;
}
/*扩散的光圈*/
.map .region-item .region-spot::after{
    content: '';
    width: 20px;
    height: 20px;
    border: solid 2px #00a0e9;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: spreadCircle 3s infinite;
}
/*光圈扩散动画*/
@keyframes spreadCircle{
    0%   {width: 20px;height: 20px;opacity: 1;}
    100% {width: 120px;height: 120px;opacity: 0;}
}

加强版

 在之前的基础上，让鼠标悬浮在圆点上时出现文字标签。

效果图

html代码

<div class="map-bg">
    <p class="region-item">
        <span class="region-spot">●</span>
        <span class="region-tab">美国分公司</span>
    </p>

    <p class="region-item">
        <span class="region-spot">●</span>
        <span class="region-tab">厦门总部 | 成都研发中心</span>
    </p>

    <p class="region-item">
        <span class="region-spot">●</span>
        <span class="region-tab">韩国分公司</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{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    left: 14%;
    bottom: 49%;
    width: 148px;
    cursor: pointer;
}
.map .region-item:nth-child(2){
    width: 322px;
    left: 60%;
    bottom: 43%;
}
.map .region-item:nth-child(3){
    left: 73.2%;
    bottom: 53.3%;
}
/*文字标签*/
.map .region-tab{
    width: 100%;
    height: 64px;
    background-image: linear-gradient(132deg, #0d66cb 0%, #227ad7 50%, #3b92e4 100%);
    box-shadow: 4px 5px 5px 0px rgb(0 7 12 / 29%);
    border-radius: 10px;
    color: #fff;
    font-size: 22px;
    line-height: 64px;
    position: absolute;
    left: 0;
    top: -72px;
    margin-bottom: 6px;
    z-index: 99;
    display: none;
}
/*标签底部的三角形*/
.map .region-tab::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #2880da;
    position: absolute;
    bottom: -8px;
    left: 40%;
}
.map .region-item:nth-child(2) .region-tab:after {
    left: 45.3%;
}
/*地图标记圆点*/
.map .region-item .region-spot{
    display: inline-flex;
    color: #00a0e9;
    justify-content: center;
    align-items: center;
    line-height: 110%;
}
/*鼠标悬浮时显示文字标签*/
.map .region-spot:hover+.region-tab{
    display: inline-block;
}
/*扩散的光圈*/
.map .region-item .region-spot::after{
    content: '';
    width: 20px;
    height: 20px;
    border: solid 2px #00a0e9;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    animation: spreadCircle 3s infinite;
}
/*光圈扩散动画*/
@keyframes spreadCircle{
    0%   {width: 20px;height: 20px;opacity: 1;}
    100% {width: 120px;height: 120px;opacity: 0;}
}

存在的缺陷

鼠标悬浮显示文字标签的悬浮范围包括了扩散的光圈，当两个圆点距离过近时会出现光圈交叉重叠的情况，导致鼠标悬浮的目标不准确。

临时解决方案

根据实际情况缩小光圈，避免发生重叠现象。