Pure CSS realizes the diffuse effect of the map marker aperture

 Add an aperture diffusion effect to multiple points located on the map, the aperture changes from small to large, and the color transitions from dark to light.

renderings

 

html code

<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 code

/*地图背景*/
.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;}
}

Enhanced Edition

 On the basis of the previous one, let the text label appear when the mouse hovers over the dot.

renderings

 

html code

<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 code

/*地图背景*/
.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;}
}

Defects

The hovering range of the text label displayed by the mouse hover includes the diffused aperture. When the distance between the two dots is too close, the aperture will overlap and overlap, resulting in inaccurate mouse hovering targets.

temporary solution

Reduce the aperture according to the actual situation to avoid overlapping.