市面上大多数的热点地图，都是以 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;
/* 给地图设置宽高 */
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 这样的颜色类就好了。现在我们将其他的地点以及样式增加上去。

小编学习的这个《CSS3 实现热点地图动画》课程，目前正在限时免费中，感兴趣的小伙伴赶紧点击了解更多，进行学习吧！

说不定做出来的地图比小编的更好看~

刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画相关推荐

拆红包动态效果html5,用React加CSS3实现微信拆红包动画效果
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习用CSS3绘制红包 .redpack { he ...
试着编写了一下战网的登录页面，刚学会css和html5
试着编写了一下战网的登录页面,刚学会css和html5 暴雷游戏通行证登录暴雷游戏通行证登录保持登录状态免费创建暴雪游戏通行证无法登录? 安全令重新同步
html 动物特效,分享9款用HTML5/CSS3制作的动物人物动画，
分享9款用HTML5/CSS3制作的动物人物动画, 1.纯CSS3绘制可爱的蚱蜢还有眨眼动画今天我们要分享一个利用纯CSS3绘制的蚱蜢动画,非常可爱. 在线演示源码下载 2.HTML5 Canv ...
刚学会短视频剪辑的看过来，剪辑顺序你得懂，上手容易效果好
刚学会短视频剪辑的看过来,剪辑顺序你得懂,上手容易效果好对于刚刚才学会短视频剪辑的新手们来说,简单的剪辑顺序是必须要掌握的,按照顺序做内容,总不会出错.那么接下来我们就来说一说,刚学会短视频剪辑的 ...
怎么在html中加入特效文字,如何使用HTML5+css3实现粒子效果文字动画特效（附完整代码）...
我们在浏览web网页的时候会发现现在的网页做的越来越美观,很多动画特效做的越来越炫酷,这离不开HTML5和css3的深入开发.今天我们要来分享一款基于HTML5和css3的文字特效--粒子效果文字动画 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
html5+css3满天星星音乐背景动画特效(超炫酷)
css3满天星星音乐背景动画特效 css3属性绘制唯美的满天星星和audio MP3音乐结合背景动画特效. 作品介绍 1.网页作品简介方面 :css3属性绘制唯美的满天星星和audio MP3音乐结合 ...
京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码效果图各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以在我 ...

刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画

知识点

HTML 基础结构

地点样式设置

刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画相关推荐

最新文章

热门文章