.map{
/* 设置图片的宽高,插入地图图片 map为父盒子,根据子绝父相设置定位 */
width: 1707px;
height: 800px;
background-color: slategray;
background: url(1120.png) no-repeat center center;
position: relative;
}
/* 不给city宽高,由dotted、move、move1、move2来撑开,设置绝对定位 */
.city{
position: absolute;
left: 1083px;
top: 320px;
}
/* 出来的图形是一个原点,所以用border-reduis */
.dotted{
width: 8px;
height: 8px;
border-radius: 50%;
background-color: azure;
}
/* div[class^=move] 属性选择器 ^是选择以move开头的属性值*/
.city div[class^=move]{
width: 8px;
height: 8px;
border-radius: 50%;
/* 设置定位,让move的位置与botted的位置重合 */
position: absolute;
/* 设置完top,left的值后,是move盒子的左上角处于dotted圆心的位置
所以要设置translate 才能和dotted盒子重合*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
/* 出来的圆圈是由阴影来完成的 */
box-shadow: 0 0 12px rgb(147, 116, 179);
/* 动画综合写法 move是动画的名字 .5s是一周期完成需要的时间
linear运动速度曲线 infinite循环播放*/
animation: move .5s linear infinite;
}
.city div.move2{
/* 动画属性 delay延迟0.4s */
animation-delay: 0.4s;
}
.city div.move3{
animation-delay: 0.7s;
}
/* @keyframes有两种写法 一种是from{} to{},另外一种是0%{},100%{} */
@keyframes move{
0%{}
40%{
width: 50px;
height: 50px;
opacity: 1;
}
100%{
width: 70px;
height: 70px;
opacity: 0;
}
}
<div class="map">
<div class="city">
<div class="dotted"></div>
<div class="move"></div>
<div class="move1"></div>
<div class="move2"></div>
</div>
</div>