HTML+CSS3地图动画

最新推荐文章于 2023-09-19 17:16:37 发布

十六进制呀

最新推荐文章于 2023-09-19 17:16:37 发布

阅读量773

点赞数

分类专栏： html+css3 文章标签： html css3 css html5

本文链接：https://blog.csdn.net/m0_48268538/article/details/106955063

版权

图片素材
map
background-image

效果如下图：
效果图1
效果图2

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>地图</title>
	<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
	<div class="map-service">
		<div class="map-service-right">
			<div class="china-map">
				<div class="region-list postition-1">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-01"></span>
						<span class="pulse delay-02"></span>
					</div>
				</div>
				<div class="region-list active postition-2 online-node">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-06"></span>
						<span class="pulse delay-05"></span>
						<span class="pulse delay-04"></span>
					</div>
					<div class="show-regin"><span>四川</span></div>
				</div>
				<div class="region-list postition-3">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-01"></span>
						<span class="pulse delay-02"></span>
					</div>
				</div>
				<div class="region-list waite postition-4 waite-node">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-01"></span>
						<span class="pulse delay-02"></span>
					</div>
					<div class="show-regin"><span>陕西</span></div>
				</div>
				<div class="region-list waite postition-5 waite-node">
					<div class="area-box"