CSS實現炫酷的大數據熱點圖

SS3為我們提供了很多特性，利于旋轉、位移、縮放能實現很多的動畫，下面介紹一個大數據熱點圖的demo，以下為效果圖：

效果圖

<div class="redian">
    <div class="dotted"></div>
    <div class="round1"></div>
    <div class="round2"></div>
    <div class="round3"></div>
</div>

.dotted {
    width: 8px;
    height: 8px;
    background-color: rgb(12, 179, 230);
    border-radius: 50%;
}

@keyframes round {
    0%{}
    60%{
        width: 40px;
        height: 40px;
        opacity: 1;
    }
    100%{
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

.redian div[class^="round"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    box-shadow: 0 0 12px rgb(12, 179, 230);
    border-radius: 50%;
    animation: round 1.2s linear infinite;
}

.redian div.round2 {
    animation-delay: 0.4s;
}

.redian div.round3 {
    animation-delay: 0.8s;
}

以上為核心的CSS代碼，更多精彩內容請關注公眾號：Let編程

面上大多數的熱點地圖，都是以 JavaScript 來做的，但是使用 CSS3 制作的熱點地圖倒還真的挺少見的。

其實 CSS3 的功能也很強大，能幫助我們實現很多用 JavaScript 實現的效果，最近小編剛學會 HTML5 和簡單的 CSS3，在這里用 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 實現熱點地圖動畫》課程，目前正在限時免費中，感興趣的小伙伴趕緊點擊了解更多，進行學習吧！

說不定做出來的地圖比小編的更好看~

點擊了解更多，學習完整課程內容～

TML5作為移動端主流營銷推廣方式的一種，具有互動性高，成本低，易于傳播方式的優點。受各大品牌商和UED團隊歡迎。

縱觀H5整個創作過程報考：策劃、操作邏輯構思、腳本草圖繪制、設計制作、開發實現。

首先了解幾種用戶現象——什么情況下會促使用戶點擊或主動轉發？

1. 用戶發自內心覺得喜歡

戳中用戶痛點，自然會引起共鳴。以下痛點，可以試著戳戳看：

好玩－互動娛樂類、輕型小游戲。像早前火爆朋友圈的腦洞神作“圍住神經貓”和最近百度外賣的“種太陽”。
炫酷—開進你朋友圈的寶馬的M2上市推廣、淘寶造物節全景圖重力體驗邀請函，還有其他各種牛逼的3D H5、VR H5，一看就跟外面那些五（yao）毛（yan）特（jian）效（huo）不一樣。
實用—如“十個iPhone手機使用技巧” 和“絕對干貨!!旅行收納實用技巧匯總”，這種一看就low不屑點開，但身體還是會很誠實的點開并悄悄發給身邊的好基友。
攀比心—曬消費，曬得分，曬皮膚年齡…能滿足人艱不拆的小小優越感和大家都曬我也得曬的“被”從眾心理。
同理心—能引起情感共鳴，細膩走心的內容，像“我們之間就一個字”，和最近頻頻讓人驚艷到的方太抽油煙機廣告，還有被淘寶一下就戳中味蕾的鲅魚水餃…
冷知識（漲姿勢） — 知乎、果殼、好奇心日報這些內容為王的平臺為我們提供的遠不止這些。

圖1：(部分案例）

2. 利益驅使下被動分享

比起細分領域的禮品，大眾優惠項—如返利、優惠券、購物券、電影券等吸引力一般會大一些。

其次要知道幾個數據真相：

只有微信推送的情況下，H5的活躍周期最多3天；
最佳發布推送時間為21點到22點；
6～8頁為H5最佳瀏覽頁數，P數過多或單P體量過大都會增加H5跳失率。

（圖2：H5傳播監測分析工具DATASTORY）

了解這些數據后，再來思考幾個問題：

1. 活動背景/目的

拉新？留存？促活？提升品牌曝光率？不同目的決定策略方向及投入成本（成本意識很重要）

2. 針對用戶群體是哪些

從消費心理角度界定用戶群體不同屬性，為自己的目標用戶量身定制推廣題材（來自數英網的一則數據新聞：瀏覽量最高的1000個H5作品中，42%是心靈雞湯，最高17,358,480 uv；27%是測試題，最高49,940,339 uv；15%是社交互動游戲，最高2,892,047 uv；5%是大型品牌宣傳，最高551,195 uv。）

3.推廣渠道定哪些

除了H5本身的吸引力，渠道也是影響傳播的重大因素，微信公眾號、朋友圈、微信群、微信廣告、微博、LinkedIn、QQ群、QQ空間、新聞客戶端、App廣告、廣點通，都是國內H5推廣的可行渠道，根據分析目標用戶社交習慣，針對性選擇渠道來有效提升傳播效率。

磨刀不誤砍柴工，確定市場需求和推廣目的，才有可能保證方案 “先做對，再做好”。（借用DDC運營設計師Gary的經驗觀點，與市場預期不契合，再好的創意方案也是不能推的）為避免“胎死腹中”的高成本悲劇，還是先做好這些前期準備工作

分享一些身邊的案例：

案例一

某廣告公司六一兒童節的“自娛自樂”項目，但作為一次小范圍、零渠道費的推廣，意外收獲上萬PV，走心的選項題勾起一波80后的濃濃懷舊心，也算是一個不錯的case（http://fdc16b73d368.ih5.cn）

案例二

傅園慧受采訪第二天粉絲暴漲，同日墨跡天氣的小游戲推出，追熱點就是要速度夠快，他們做到了，2天時間內PV輕松過百萬（http://promo.moji.com）

案例三

幫朋友的項目做的設計支持，根據項目要求關鍵元素：老上海、紅色延安、舞臺劇來進行分鏡創作。由于p數過多，動效繁碎，對加載速度有所影響，算是一個有經驗教訓的case分享給大家：http://www.miaos.me

H5要兼具娛樂性和推廣性，不是件容易事。但如果能兼顧市場需求同時又能讓設計“玩”起來，是件聽起來挺刺激的事兒。

數據能幫我們驗證一些問題和發現一些潛在趨勢，但PV／UV也不是衡量推廣效果的唯一標準，沒有達到百萬用戶的H5就不是好的營銷推廣？也不然，定位精準用戶，找到適合的推廣方式才是重點要考慮的。

專注互聯網產品H5頁面設計開發橘子創意工作室，具有超過十年的互聯網行業經驗，高效整合各種資源，向企業提供H5設計開發，運營營銷推廣等一站式服務，如果您需要設計和開發一款比較有創意的 H5營銷頁面，可以聯系我們。
微信公眾號：juzimedia，聯系微信：aoch123 歡迎留言咨詢和恰談合作。

在線咨詢

上一篇：html語法-文本格式化標簽 #html5開發
下一篇：一招搞定HTML中連續字母或數字不換行的問題

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS實現炫酷的大數據熱點圖

知識點

HTML 基礎結構

地點樣式設置

您的項目需求