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 基础结构

地点样式设置

您的项目需求