css3动画-地图热点图案例

鹿其其鹿

于 2022-09-17 13:23:36 发布

阅读量322

点赞数

分类专栏： Web案例文章标签： css3 css html

本文链接：https://blog.csdn.net/qq_45478564/article/details/126904319

版权

Web案例专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
		div{
			position: relative;
			width: 1000px;
			height: 800px;
			background: url("China(1).jpg") no-repeat center;
			margin: 50px auto;
		}
		.city1{
			position: absolute;
			top: 320px;
			right:360px;
			font-size: 20px;
		}
		.city2{
			position: absolute;
			top: 420px;
			right:560px;
			font-size: 20px;
		}
		.dot{
			display: block;
			width: 8px;
			height: 8px;
			background-color: #1d91ee;
			border-radius:50%;
		}
		.nod span[class^="pulse"]{
			/*保证波纹在父盒子里水平居中*/
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			display: block;
			width: 8px;
			height: 8px;
			box-shadow: 0 0 12px #007db8;
			border-radius: 50%;
			animation: pulse 1.2s linear infinite;
		}
		div .nod .pulse2{
			animation-delay: 0.4s;
		}
		div .nod .pulse3{
			animation-delay: 0.8s;
		}
		
		@keyframes pulse {
			0%{
			
			}
			70%{
				width: 40px;
				height: 40px;
				/*透明度*/
				opacity: 1;
			}
			100%{
				width: 70px;
				height: 70px;
				opacity: 0;
			}
		}
	</style>
</head>
<body>
	<div>
		<span class="city1 nod">
			<span class="dot"></span>
			<span class="pulse1"></span>
			<span class="pulse2"></span>
			<span class="pulse3"></span>
		</span>
		<span class="city2 nod">
			<span class="dot"></span>
			<span class="pulse1"></span>
			<span class="pulse2"></span>
			<span class="pulse3"></span>
		</span>
	</div>
</body>
</html>

图片在这里：在这里插入图片描述