How to use CSS to achieve data hotspot effect

The effect is as follows:

insert image description here

analyze

1. Here you can see three circles encircling the dot and doing a zooming animation.

So we write four box points + 3 circles

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .city {
            width: 200px;
            height: 200px;
            background-color: gray;
            position: relative;
        }
        
        .pul {
            width: 8px;
            height: 8px;
            background-color: #09f;
            border-radius: 50%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
        }
        /* Select attributes whose class names begin with pul*/
        
        .city div[class^="pul"] {
            /* Center */
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0px 0px 10px #09f;
        }
    </style>
</head>

<body>
    <div class="city">
        <div class="pul"></div>
        <div class="pul1"></div>
        <div class="pul2"></div>
        <div class="pul3"></div>
    </div>
</body>

</html>

insert image description here

After writing, we need to add a zoom animation to the three circles, but you can see that the three circles do not trigger the animation at the same time, so we need to set different delay times for the three circles to define the animation.

/*define animation*/
  @keyframes pul {
            0% {}
            50% {
                width: 20px;
                height: 20px;
                opacity: 1;

            }

            100% {
                width: 50px;
                height: 50px;
                opacity: 0;
            }
        }

Using Animation

.city>div:nth-child(2) {
            animation: pul 2s .5s linear infinite;
        }
        
        .city>div:nth-child(3) {
            animation: pul 2s 1s linear infinite;
        }
        
        .city>div:nth-child(4) {
            animation: pul 2s 1.5s linear infinite;
        }

The effect is as follows:

insert image description here

You can find the background image here by yourself, so I won’t post it here. It costs money to download it.

This is the end of this article on how to use CSS to achieve data hotspot effects. For more relevant CSS data hotspot content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

<<: 37 Tips for a Good User Interface Design (with Pictures)

>>: Steps to repair grub.cfg file corruption in Linux system