市面上大多数的热点地图，都是以 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=
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
