新课限免｜CSS3 实现热点地图动画

最新推荐文章于 2022-04-30 12:27:42 发布

实验楼v

最新推荐文章于 2022-04-30 12:27:42 发布

阅读量323

点赞数

文章标签：定位 css html javascript 数据可视化

原文链接：https://www.lanqiao.cn/courses/2673

版权

JavaScript 的热点地图十分常见，但是使用 CSS3 制作的热点地图或许你就没有听说过了。

其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，今天带来一门《CSS3 实现热点地图动画》的教程，效果如下：

课程将手把手带大家用 CSS3 制作一个热点地图，你可以学到 HTML 的布局、HTML 列表、CSS 选择器、CSS3 动画、CSS3 的 2D 转换等，对于练习 HTML、CSS 也有很好的帮助。

课程限时免费中，欢迎大家来实验楼亲手把这个项目实现一遍。课程地址：

https://www.lanqiao.cn/courses/2673

知识点

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;
  /* 给地图设置宽高 */
  width: 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;
  width: 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;
  width: 10px;
  height: 10px;
  background: #a2a9b4;
  opacity: 1;
  border-radius: 50%;
}
/* 向外扩散的圆圈 */
.region .place {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -33px 0 0 -33px;
  width: 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;
  width: 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 {
  width: 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 这样的颜色类就好了。现在我们将其他的地点以及样式增加上去。

篇幅有限，完整内容请点击阅读原文查看。

???????????? 点击阅读原文，学习完整课程内容～

实验楼v

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
新课限免｜CSS3 实现热点地图动画

JavaScript 的热点地图十分常见，但是使用 CSS3 制作的热点地图或许你就没有听说过了。其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，...
复制链接

扫一扫