剛學會 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 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小夥伴趕緊點選瞭解更多，進行學習吧！
說不定做出來的地圖比小編的更好看~