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

市面上大多数的热点地图,都是以 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 实现热点地图动画》课程,目前正在限时免费中,感兴趣的小伙伴赶紧点击了解更多,进行学习吧!

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

posted @ 2020-08-18 17:43  蓝桥云课  阅读(855)  评论(0编辑  收藏  举报