动画效果展示

• 简写属性里面不包含animation-play-state
• 暂停动画：animation-play-state: puased;经常和鼠标经过等其他配合使用
• 想要动画走回来，而不是直接跳回来：animation-direction: alterlate
• 盒子动画结束后，停在结束位置：animation-fill-mode: forwards

地图点亮城市类波纹

.city div[class="pulse"]{
/*保证小波纹在父盒子里面水平垂直居中，放大后就会中心向四周发散*/
position: absolute;
top: 50%；
left: 50%;
transform: translate(-50%,-50%);
width: 8px;
height: 8px;
box-shadow: 0 0 12px #009dfd;
border-radius: 50%;
/*波纹匀速一致*/
/*infiniter无限循环*/
animation: pulse 1.2s linea infiniter;
}


@keyframes pulse {
0% {}
70% {
    width: 40px;
    height: 40px;
    opacity: 1;
    }
100% {
width: 70px;
height: 70px;
opacity: 0;
     }
}

让文字强制一行内显示

white-space: nowrap;