<title>热点图案例</title>
<style>
.map {
position: relative;
width: 658px;
height: 544px;
background: url(../images/map1.jpg);
margin: 0 auto;
}
.city {
position: absolute;
top: 201px;
right: 160px;
}
.tb {
top: 430px;
right: 75px;
}
.sichuan {
top: 350px;
right: 320px;
}
.dotted {
width: 7px;
height: 7px;
background-color: #09f;
border-radius: 50%;
}
/* 属性选择器 */
.city div[class^="pulse"] {
/* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 7px;
height: 7px;
/* 阴影 */
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(3);因为它会让阴影变大,不好看 */
width: 40px;
height: 40px;
/* 透明度 */
opacity: 1;
}
100% {
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
<div class="city tb">
<div class="dotted">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
<div class="city sichuan">
<div class="dotted">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</div>
</body>
热点图小案例
最新推荐文章于 2022-11-19 21:14:52 发布