刚学会 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 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！
說不定做出來的地圖比小編的更好看~
總結
以上是生活随笔為你收集整理的刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 有了它，一天学会 PyTorch！
- 下一篇： 开源的数据库，PostgreSQL 基础