市面上大多数的热点地图,都是以 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