css动画案例——实现热点图

手残程序员啊~

于 2021-08-12 21:29:49 发布

阅读量508

点赞数 1

分类专栏： css3 HTML

本文链接：https://blog.csdn.net/weixin_46032713/article/details/119654170

版权

本文介绍了什么是热点图，它是一种能清晰传达信息的图像。文章通过分享CSS代码示例，展示了如何制作热点图，并提供了动画效果。文章鼓励读者点赞收藏，期待与大家共同学习更多相关案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是热点图？

热点图，就是看到这个图像，能够让人豁然开朗，明白要表达什么。
上源码

        body {
   
            background-color: #333;
        }
        
        .map {
   
            position: relative;
            width: 747px;
            height: 617px;
            background: url(media/map.png) no-repeat;
            margin: 0 auto;
        }
        
        .city {
   
            position: absolute;
            top: 225px;
            right: 191px;
            color: #fff;
        }
        
        .tb {
   
            top: 500px;
            right: 80px;
        }
        
        .gd {
   
            top: 535px;
            right: 186px
        }
        
        .dotted {
   
            width: 8px;
            height: 8px;
            background-color