Pure CSS réalise l'effet diffus de l'ouverture du marqueur de carte

 Ajoutez un effet de diffusion d'ouverture à plusieurs points situés sur la carte, l'ouverture passe de petite à grande et la couleur passe du foncé au clair.

rendus

 

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

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

Édition améliorée

 Sur la base du précédent, laissez apparaître l'étiquette de texte lorsque la souris survole le point.

rendus

 

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

Code 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;}
}

Défauts

La plage de survol de l'étiquette de texte affichée par le survol de la souris inclut l'ouverture diffusée. Lorsque la distance entre les deux points est trop proche, l'ouverture se chevauchera et se chevauchera, ce qui entraînera des cibles de survol de la souris inexactes.

solution temporaire

Réduisez l'ouverture en fonction de la situation réelle pour éviter les chevauchements.