大数据热点图

```

```

<div class="dotted"></div>
		<div class="pusel1"></div>
		<div class="pusel2"></div>
		<div class="pusel3"></div>
		</div>
		</div>

</body>

接下来是css

<style type="text/css">
			body{
				background-color: #333333;
			}
			.map{
				position: relative;
				width: 747px;
				height: 617px;
				background: url(media/map.png) no-repeat;
				margin: 0 auto;
			}
			.city{
				position: absolute;
				top: 220px;
				right: 195px;
			
			}
			
			.city1{
				position: absolute;
				top: 500px;
				right: 80px;
			}
			.dotted{
				width: 8px;
				height: 8px;
				background-color: #0000FF;
				border-radius: 50%;
			}
			 .city div[class^="pusel"]{
				/* 保证在父盒子里,并水平垂直居中 */
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 8px;
				height: 8px;
				/* 水平垂直为0 阴影12 */
				box-shadow: 0 0 12px #0066FF;
				border-radius: 50%;
				animation: pusel 2s linear infinite;
			}
			
			.city div.pusel1{
				animation-duration: 1s;
			}
			
			.city div.pusel2{
				/* animation-duration: 2s; */
				animation-delay: 0.4s;
			}
			
			.city div.pusel3{
				animation-duration: 3s;
			}
			.city1 div[class^="pusel"]{
				/* 保证在父盒子里,并水平垂直居中 */
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				width: 8px;
				height: 8px;
				/* 水平垂直为0 阴影12 */
				box-shadow: 0 0 12px #0066FF;
				border-radius: 50%;
				animation: pusel 2s linear  infinite ;
				
			}
			
			.city1 div.pusel1{
				animation-duration: 1s;
			}
			
			.city1 div.pusel2{
				animation-duration: 2s;
			}
			
			.city1 div.pusel3{
				animation-duration: 3s;
			}
			
			@keyframes pusel{
				
				70%{
					width: 40px;
					height: 40px;
				}
				100%{
					width: 70px;
					height: 70px;
				}	
			}
			}
		</style>