CSS實(shí)現(xiàn)炫酷的大數(shù)據(jù)熱點(diǎn)圖

SS3為我們提供了很多特性，利于旋轉(zhuǎn)、位移、縮放能實(shí)現(xiàn)很多的動(dòng)畫(huà)，下面介紹一個(gè)大數(shù)據(jù)熱點(diǎn)圖的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代碼，更多精彩內(nèi)容請(qǐng)關(guān)注公眾號(hào)：Let編程

面上大多數(shù)的熱點(diǎn)地圖，都是以 JavaScript 來(lái)做的，但是使用 CSS3 制作的熱點(diǎn)地圖倒還真的挺少見(jiàn)的。

其實(shí) CSS3 的功能也很強(qiáng)大，能幫助我們實(shí)現(xiàn)很多用 JavaScript 實(shí)現(xiàn)的效果，最近小編剛學(xué)會(huì) HTML5 和簡(jiǎn)單的 CSS3，在這里用 CSS3 實(shí)現(xiàn)了熱點(diǎn)地圖動(dòng)畫(huà)，效果如下：

CSS3 實(shí)現(xiàn)熱點(diǎn)地圖動(dòng)畫(huà)

下面給大家初步講講，如何用 CSS3 制作一個(gè)熱點(diǎn)地圖，你可以學(xué)到 HTML 的布局、HTML 列表、CSS 選擇器、CSS3 動(dòng)畫(huà)、CSS3 的 2D 轉(zhuǎn)換等，對(duì)于練習(xí) HTML、CSS 也有很好的幫助。

知識(shí)點(diǎn)

HTML 列表
CSS 相對(duì)定位與絕對(duì)定位
CSS3 動(dòng)畫(huà)
CSS3 transform 屬性
CSS3 animation-delay () 屬性

相關(guān)代碼下載命令：

點(diǎn)擊文末閱讀原文，獲取完整代碼。

HTML 基礎(chǔ)結(jié)構(gòu)

首先我們來(lái)創(chuàng)建如下目錄結(jié)構(gòu)：

在 img 目錄下獲取地圖圖片，打開(kāi)終端，執(zhí)行以下命令：

$ cd img$ wget https://labfile.oss.aliyuncs.com/courses/2673/map_black_bg.png

在 index.html 文件中寫(xiě)入如下代碼：

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>熱點(diǎn)地圖</title>    <!-- 引入CSS -->    <link rel="stylesheet" href="./index.css" />  </head>  <body>    <!-- 地圖 -->    <div class="china-map"></div>  </body></html>

為了讓我們的城市能夠顯示在地圖上，在這里我選擇使用 CSS 相對(duì)定位與絕對(duì)定位的方式。

在 index.css 文件中寫(xiě)入如下代碼：

/* CSS 通配符 * 號(hào)，表示所有的元素一開(kāi)始默認(rèn)的內(nèi)外邊距為 0 */* {  margin: 0;  padding: 0;}body {  /* 背景色 */  background: #31363a;}.china-map {  /* 給地圖加上相對(duì)定位 */  position: relative;  /* 給地圖設(shè)置寬高 */  width: 747px;  height: 617px;  /* 設(shè)置背景圖片，指定為不重復(fù)，并且居中 */  background: url("./map_black_bg.png") no-repeat center;  /* 將地圖設(shè)置為離頂部60px，左右居中 */  margin: 60px auto 0;}

執(zhí)行如下步驟預(yù)覽效果：

這下我們的地圖就顯示出來(lái)了。

地點(diǎn)樣式設(shè)置

地圖成功顯示后，我們需要在上面設(shè)置地點(diǎn)以及地點(diǎn)的樣式。

在 index.html 中加入以下代碼：

<div class="china-map">  <!-- 地點(diǎn)區(qū)域 -->  <div class="region">    <!-- 地點(diǎn)顯示的小圓點(diǎn) -->    <div class="dot"></div>    <!-- 向外擴(kuò)散的圓圈 -->    <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;}/* 區(qū)域地點(diǎn) */.region {  /* 絕對(duì)定位 */  position: absolute;}/* 小圓點(diǎn) */.region .dot {  position: absolute;  top: 50%;  left: 50%;  margin: -5px 0 0 -5px;  width: 10px;  height: 10px;  background: #a2a9b4;  opacity: 1;  border-radius: 50%;}/* 向外擴(kuò)散的圓圈 */.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;}

預(yù)覽效果：

如何將這個(gè)地點(diǎn)放置在相應(yīng)位置上呢？這個(gè)時(shí)候就要使用 left 屬性和 top 屬性了，通過(guò)計(jì)算正確的偏移值，將地點(diǎn)放置在合適的位置上。

修改 .region 的樣式：

.region {  position: absolute;  top: 302px;  left: 308px;}

預(yù)覽效果：

青海就已經(jīng)顯示在正確的地方上了。但是我們轉(zhuǎn)念一想，如果我們還有一個(gè)城市，比如北京，這個(gè)時(shí)候是不是該這樣：

.region2 {  position: absolute;  top: 229px;  left: 559px;}

不過(guò)如此一來(lái)，每當(dāng)創(chuàng)建一個(gè)城市，就要新寫(xiě)一個(gè) CSS 類(lèi)，并且每一個(gè)類(lèi)中都會(huì)有同樣的代碼 position:absolute，如果大篇幅的重復(fù)會(huì)增加代碼的冗余度。所以這個(gè)時(shí)候，我們可以專門(mén)新建一個(gè)類(lèi)來(lái)放置每一個(gè)城市的偏移值，修改 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>

預(yù)覽效果：

同樣的道理，如果我們想設(shè)置不同地點(diǎn)有不同顏色的顯示，我們可以專門(mén)新建一個(gè)顏色類(lèi)：

修改 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;}

預(yù)覽效果：

如此一來(lái)，如果我們想給一些地點(diǎn)加上樣式，只需要為它加上像 .blue 這樣的顏色類(lèi)就好了。現(xiàn)在我們將其他的地點(diǎn)以及樣式增加上去。

小編學(xué)習(xí)的這個(gè)《CSS3 實(shí)現(xiàn)熱點(diǎn)地圖動(dòng)畫(huà)》課程，目前正在限時(shí)免費(fèi)中，感興趣的小伙伴趕緊點(diǎn)擊了解更多，進(jìn)行學(xué)習(xí)吧！

說(shuō)不定做出來(lái)的地圖比小編的更好看~

點(diǎn)擊了解更多，學(xué)習(xí)完整課程內(nèi)容～

TML5作為移動(dòng)端主流營(yíng)銷(xiāo)推廣方式的一種，具有互動(dòng)性高，成本低，易于傳播方式的優(yōu)點(diǎn)。受各大品牌商和UED團(tuán)隊(duì)歡迎。

縱觀H5整個(gè)創(chuàng)作過(guò)程報(bào)考：策劃、操作邏輯構(gòu)思、腳本草圖繪制、設(shè)計(jì)制作、開(kāi)發(fā)實(shí)現(xiàn)。

首先了解幾種用戶現(xiàn)象——什么情況下會(huì)促使用戶點(diǎn)擊或主動(dòng)轉(zhuǎn)發(fā)？

1. 用戶發(fā)自內(nèi)心覺(jué)得喜歡

戳中用戶痛點(diǎn)，自然會(huì)引起共鳴。以下痛點(diǎn)，可以試著戳戳看：

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

圖1：(部分案例）

2. 利益驅(qū)使下被動(dòng)分享

比起細(xì)分領(lǐng)域的禮品，大眾優(yōu)惠項(xiàng)—如返利、優(yōu)惠券、購(gòu)物券、電影券等吸引力一般會(huì)大一些。

其次要知道幾個(gè)數(shù)據(jù)真相：

只有微信推送的情況下，H5的活躍周期最多3天；
最佳發(fā)布推送時(shí)間為21點(diǎn)到22點(diǎn)；
6～8頁(yè)為H5最佳瀏覽頁(yè)數(shù)，P數(shù)過(guò)多或單P體量過(guò)大都會(huì)增加H5跳失率。

（圖2：H5傳播監(jiān)測(cè)分析工具DATASTORY）

了解這些數(shù)據(jù)后，再來(lái)思考幾個(gè)問(wèn)題：

1. 活動(dòng)背景/目的

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

2. 針對(duì)用戶群體是哪些

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

3.推廣渠道定哪些

除了H5本身的吸引力，渠道也是影響傳播的重大因素，微信公眾號(hào)、朋友圈、微信群、微信廣告、微博、LinkedIn、QQ群、QQ空間、新聞客戶端、App廣告、廣點(diǎn)通，都是國(guó)內(nèi)H5推廣的可行渠道，根據(jù)分析目標(biāo)用戶社交習(xí)慣，針對(duì)性選擇渠道來(lái)有效提升傳播效率。

磨刀不誤砍柴工，確定市場(chǎng)需求和推廣目的，才有可能保證方案 “先做對(duì)，再做好”。（借用DDC運(yùn)營(yíng)設(shè)計(jì)師Gary的經(jīng)驗(yàn)觀點(diǎn)，與市場(chǎng)預(yù)期不契合，再好的創(chuàng)意方案也是不能推的）為避免“胎死腹中”的高成本悲劇，還是先做好這些前期準(zhǔn)備工作

分享一些身邊的案例：

案例一

某廣告公司六一兒童節(jié)的“自?shī)首詷?lè)”項(xiàng)目，但作為一次小范圍、零渠道費(fèi)的推廣，意外收獲上萬(wàn)PV，走心的選項(xiàng)題勾起一波80后的濃濃懷舊心，也算是一個(gè)不錯(cuò)的case（http://fdc16b73d368.ih5.cn）

案例二

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

案例三

幫朋友的項(xiàng)目做的設(shè)計(jì)支持，根據(jù)項(xiàng)目要求關(guān)鍵元素：老上海、紅色延安、舞臺(tái)劇來(lái)進(jìn)行分鏡創(chuàng)作。由于p數(shù)過(guò)多，動(dòng)效繁碎，對(duì)加載速度有所影響，算是一個(gè)有經(jīng)驗(yàn)教訓(xùn)的case分享給大家：http://www.miaos.me

H5要兼具娛樂(lè)性和推廣性，不是件容易事。但如果能兼顧市場(chǎng)需求同時(shí)又能讓設(shè)計(jì)“玩”起來(lái)，是件聽(tīng)起來(lái)挺刺激的事兒。

數(shù)據(jù)能幫我們驗(yàn)證一些問(wèn)題和發(fā)現(xiàn)一些潛在趨勢(shì)，但PV／UV也不是衡量推廣效果的唯一標(biāo)準(zhǔn)，沒(méi)有達(dá)到百萬(wàn)用戶的H5就不是好的營(yíng)銷(xiāo)推廣？也不然，定位精準(zhǔn)用戶，找到適合的推廣方式才是重點(diǎn)要考慮的。

專注互聯(lián)網(wǎng)產(chǎn)品H5頁(yè)面設(shè)計(jì)開(kāi)發(fā)橘子創(chuàng)意工作室，具有超過(guò)十年的互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn)，高效整合各種資源，向企業(yè)提供H5設(shè)計(jì)開(kāi)發(fā)，運(yùn)營(yíng)營(yíng)銷(xiāo)推廣等一站式服務(wù)，如果您需要設(shè)計(jì)和開(kāi)發(fā)一款比較有創(chuàng)意的 H5營(yíng)銷(xiāo)頁(yè)面，可以聯(lián)系我們。
微信公眾號(hào)：juzimedia，聯(lián)系微信：aoch123 歡迎留言咨詢和恰談合作。

在線咨詢

上一篇：html語(yǔ)法-文本格式化標(biāo)簽 #html5開(kāi)發(fā)
下一篇：一招搞定HTML中連續(xù)字母或數(shù)字不換行的問(wèn)題

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS實(shí)現(xiàn)炫酷的大數(shù)據(jù)熱點(diǎn)圖

知識(shí)點(diǎn)

HTML 基礎(chǔ)結(jié)構(gòu)

地點(diǎn)樣式設(shè)置

您的項(xiàng)目需求