市面上大多数的热点地图，都是以 JavaScript 来做的，但是使用 CSS3 制作的热点地图倒还真的挺少见的。
其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，最近小编刚学会 HTML5 和 简单的 CSS3，在这里用 CSS3 实现了热点地图动画，效果如下：
下面给大家初步讲讲，如何用 CSS3 制作一个热点地图，你可以学到 HTML 的布局、HTML 列表、CSS 选择器、CSS3 动画、CSS3 的 2D 转换等，对于练习 HTML、CSS 也有很好的帮助。
知识点
- HTML 列表
- CSS 相对定位与绝对定位
- CSS3 动画
- CSS3 transform 属性
- CSS3 animation-delay () 属性
相关代码下载命令：
点击文末链接，获取完整代码。
HTML 基础结构
首先我们来创建如下目录结构：
在 img 目录下获取地图图片，打开终端，执行以下命令：
$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png
在 index.html 文件中写入如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>热点地图</title>
<!-- 引入CSS -->
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<!-- 地图 -->
<div class="china-map"></div>
</body>
</html>
为了让我们的城市能够显示在地图上，在这里我选择使用 CSS 相对定位与绝对定位的方式。
在 index.css 文件中写入如下代码：
/* CSS 通配符 * 号，表示所有的元素一开始默认的内外边距为 0 */
* {
margin: 0;
padding: 0;
}
body {
/* 背景色 */
background:#31363a;
}
.china-map {
/* 给地图加上相对定位 */
position: relative;
/* 给地图设置宽高 */
747px;
height: 617px;
/* 设置背景图片，指定为不重复，并且居中 */
background: url("./map_black_bg.png") no-repeat center;
/* 将地图设置为离顶部60px，左右居中 */
margin: 60px auto 0;
}
执行如下步骤预览效果：
这下我们的地图就显示出来了。
地点样式设置
地图成功显示后，我们需要在上面设置地点以及地点的样式。
在 index.html 中加入以下代码：
<div class="china-map">
<!-- 地点区域 -->
<div class="region">
<!-- 地点显示的小圆点 -->
<div class="dot"></div>
<!-- 向外扩散的圆圈 -->
<div class="place"></div>
<!-- 地名 -->
<div class="txt">青海</div>
</div>
</div>
在 index.css 中加入以下代码：
* {
margin: 0;
padding: 0;
}
body {
background: #31363a;
}
/* 地图 */
.china-map {
position: relative;
747px;
height: 617px;
background: url("./map_black_bg.png") no-repeat center;
margin: 60px auto 0;
}
/* 区域地点 */
.region {
/* 绝对定位 */
position: absolute;
}
/* 小圆点 */
.region .dot {
position: absolute;
top: 50%;
left: 50%;
margin: -5px 0 0 -5px;
10px;
height: 10px;
background: #a2a9b4;
opacity: 1;
border-radius: 50%;
}
/* 向外扩散的圆圈 */
.region .place {
position: absolute;
top: 50%;
left: 50%;
margin: -33px 0 0 -33px;
66px;
height: 66px;
border: 2px solid #b7b7b7;
border-radius: 50%;
/* 透明度 */
opacity: 0.12;
/* 阴影 */
box-shadow: 0 0 4px #82878f inset;
}
/* 地名 */
.region .txt {
position: absolute;
top: -20px;
left: 10px;
font-size: 14px;
color: #ccc;
50px;
}
预览效果：
如何将这个地点放置在相应位置上呢？这个时候就要使用 left 属性和 top 属性了，通过计算正确的偏移值，将地点放置在合适的位置上。
修改 .region 的样式：
.region {
position: absolute;
top: 302px;
left: 308px;
}
预览效果：
青海就已经显示在正确的地方上了。但是我们转念一想，如果我们还有一个城市，比如北京，这个时候是不是该这样：
.region2 {
position: absolute;
top: 229px;
left: 559px;
}
不过如此一来，每当创建一个城市，就要新写一个 CSS 类，并且每一个类中都会有同样的代码 position:absolute ，如果大篇幅的重复会增加代码的冗余度。所以这个时候，我们可以专门新建一个类来放置每一个城市的偏移值，修改 index.css 文件，增加如下代码：
.region {
position: absolute;
}
/* 青海 */
.region-qh {
top: 302px;
left: 308px;
}
/* 北京 */
.region-bj {
top: 229px;
left: 559px;
}
修改 index.html ：
<div class="china-map">
<!-- 青海 -->
<div class="region region-qh">
<div class="dot"></div>
<div class="place"></div>
<div class="txt">青海</div>
</div>
<!-- 北京 -->
<div class="region region-bj">
<div class="dot"></div>
<div class="place"></div>
<div class="txt">北京</div>
</div>
</div>
预览效果：
同样的道理，如果我们想设置不同地点有不同颜色的显示，我们可以专门新建一个颜色类：
修改 index.html ：
<!-- 北京 -->
<div class="region region-bj blue">
<div class="dot"></div>
<div class="place"></div>
<div class="txt">北京</div>
</div>
在 index.css 中加入以下代码：
/* 颜色*/
.region.blue .place {
120px;
height: 120px;
margin: -64px 0 0 -64px;
border: 1px solid #009fd9;
box-shadow: 0 0 12px #009fd9 inset;
}
.region.blue .dot {
background: #0080d9;
}
预览效果：
如此一来，如果我们想给一些地点加上样式，只需要为它加上像 .blue 这样的颜色类就好了。现在我们将其他的地点以及样式增加上去。
小编学习的这个《CSS3 实现热点地图动画》课程，目前正在限时免费中，感兴趣的小伙伴赶紧点击了解更多，进行学习吧！
说不定做出来的地图比小编的更好看~