热点图案例

偏执的太偏执、 2023-06-16 04:55 6阅读 0赞

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { 
                background-color: #333;
            }
            
            .map { 
                position: relative;
                margin: 0 auto;
                width: 747px;
                height: 617px;
                background: url(media/map.png) no-repeat;
            }
            
            .city { 
                position: absolute;
                color: #fff;
            }
            
            .beijing { 
                top: 227px;
                right: 193px;
            }
            
            .taibei { 
                top: 500px;
                right: 80px;
            }
            
            .guangzhou { 
                top: 540px;
                right: 191px;
            }
            
            .dian { 
                width: 8px;
                height: 8px;
                background-color: #09f;
                border-radius: 50%;
            }
            
            .city div[class^="bowen"] { 
                /* 保证波纹在父级盒子水平垂直居中，放大之后就会在中心向四周扩散 */
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 8px;
                height: 8px;
                box-shadow: 0 0 12px #009dfd;
                border-radius: 50%;
                /* animation-name: pulse; animation-duration: 2s; */
                /* linear匀速 */
                animation: pulse 1.2s linear infinite;
            }
            /* 注意权重 */
            
            .city div.bowen2 { 
                animation-delay: 0.4s;
            }
            
            .city div.bowen3 { 
                animation-delay: 0.8s;
            }
            
            @keyframes pulse { 
                0% { }
                70% { 
                    /* 不用scale，因为它会把阴影也放大，不好看 */
                    width: 40px;
                    height: 40px;
                    /* 透明度 */
                    opacity: 1;
                }
                100% { 
                    width: 70px;
                    height: 70px;
                    opacity: 0;
                }
            }
        </style>
    </head>
    
    <body>
        <div class="map">
            <div class="city beijing">
                <div class="dian"></div>
                <div class="bowen1"></div>
                <div class="bowen2"></div>
                <div class="bowen3"></div>
            </div>
            <div class="city taibei">
                <div class="dian"></div>
                <div class="bowen1"></div>
                <div class="bowen2"></div>
                <div class="bowen3"></div>
            </div>
            <div class="city guangzhou">
                <div class="dian"></div>
                <div class="bowen1"></div>
                <div class="bowen2"></div>
                <div class="bowen3"></div>
            </div>
        </div>
    </body>
    
    </html>

**效果图**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]  
**资源图片**（图片是透明的，把body的bgc设置成\#333就好了）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191124161722271.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191124161755765.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjg3NTE2,size_16,color_FFFFFF,t_70