案例-热点图（CSS3）

你的名字 2023-10-03 13:56 22阅读 0赞

## 案例-热点图（CSS3） ##

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>案例-热点图</title>
        <style>
            body {
        
                background-color: #333;
            }
    
            .map {
        
                position: relative;
                width: 600px;
                height: 600px;
                background: url(map.png) no-repeat;
                margin: 0 auto;
            }
    
            .city {
        
                position: absolute;
                top: 120px;
                right: 291px;
                color: black;
                font-size: 14px;
            }
    
            .dotted {
        
                width: 8px;
                height: 8px;
                background-color: red;
                border-radius: 50%;
            }
    
            .city div[class^=pulse] {
        
                /* 保证我们小波纹在父盒子里面水平垂直居中  放大之后就会向四周发散  */
                position: absolute;
                top: 84%;
                right: 67%;
                transform: translate(-0%, -50%);
                width: 8px;
                height: 8px;
                box-shadow: 0 0 10px red;
    
                border-radius: 50%;
                animation: pulse 2s linear infinite;
            }
    
            .city div.pulse2 {
        
                animation-delay: 0.4s;
            }
    
            .city div.pulse3 {
        
                animation-delay: 0.8s;
            }
    
            @keyframes pulse {
        
                0% {
        }
    
                70% {
        
                    /*  width: 40px; */
                    /*  height: 40px; */
                    transform: scale(5);
                    opacity: 1;
                }
    
                100% {
        
                    width: 70px;
                    height: 70px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="map">
    
            <div class="city">北京
                <div class="dotted">
                </div>
                <div class="pulse1"></div>
                <div class="pulse2"></div>
                <div class="pulse3"></div>
            </div>
    
        </div>
    </body>
    
    </html>