什么是热点图？
- 热点图，就是看到这个图像，能够让人豁然开朗，明白要表达什么。
- 上源码
<style>
body {
background-color: #333;
}
.map {
position: relative;
width: 747px;
height: 617px;
background: url(media/map.png) no-repeat;
margin: 0 auto;
}
.city {
position: absolute;
top: 225px;
right: 191px;
color: #fff;
}
.tb {
top: 500px;
right: 80px;
}
.gd {
top: 535px;
right: 186px
}
.dotted {
width: 8px;
height: 8px;
background-color: #09f;
border-radius: 50%;
}
.city div[class^="pulse"] {
/* 保证纸盒子在父盒子中垂直居中，然后向外发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
/* 这里不给背景，用盒子影阴最好看 */
/* background-color: #09f; */
/* 盒子阴影 */
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
animation: pulse 1.2s linear infinite;
}
.city div.pulse2 {
animation-delay: 0.4s;
}
.city div.pulse3 {
animation-delay: 0.8s;
}
/* 给子盒子做动画 */
@keyframes pulse {
0% {}
70% {
/* 这里不用transform:scale(n),因为它会让阴影变大 */
width: 40PX;
height: 40px;
/* opacity透明度 0--1 */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
<body>
<!-- tb:台北 gd：广东 -->
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city tb">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
<div class="city gd">
<div class="dotted"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</body>
输出结果，是不是很好玩呢？
热点图.gif
