HTML+CSS3地图动画

最新推荐文章于 2021-09-07 21:32:40 发布
最新推荐文章于 2021-09-07 21:32:40 发布
阅读量730 收藏 9
点赞数
分类专栏： html+css3 文章标签： html css3 css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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">
						<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 active postition-6 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 active postition-13 online-node">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-04"></span>
						<span class="pulse delay-05"></span>
						<span class="pulse delay-03"></span>
					</div>
					<div class="show-regin"><span>内蒙古</span></div>
				</div>
				<div class="region-list  active  postition-11 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 active postition-7 online-node">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-10"></span>
						<span class="pulse delay-09"></span>
						<span class="pulse delay-08"></span>
					</div>
					<div class="show-regin"><span>辽宁</span></div>
				</div>
				<div class="region-list active postition-8 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 active postition-9 online-node">
					<div class="area-box">
						<span class="dot"></span>
						<span class="pulse delay-10"></span>
						<span class="pulse delay-09"></span>
						<span class="pulse delay-08"></span>
					</div>
					<div class="show-regin"><span>江苏</span></div>
				</div>
				<div class="region-list active postition-10 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>
		</div>
	</div>
</body>
</html>

CSS样式

*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}

.clearfix:after{
	visibility:hidden;
	display:block;
	font-size:0;
	content:" ";
	clear:both;
	height:0;
}

*html .clearfix{height:1%;}

.map-service{
	position:relative;
	height:760px;
	background:url(img/map_balck_whole_bg.jpg) center no-repeat;
}

.map-service-right{margin-left:414px;padding-top:60px;}

.china-map{	
	position:relative;
	width:748px;
	height:618px;
	background:url(img/map_black_bg.png) center no-repeat;
}

.region-list{position:absolute;left:0;top:0}

/* 适用于webkit内核的浏览器 */
@-webkit-keyframes warn{
	0%{
		-webkit-transform:scale(0);
		transform:scale(0);
		opacity:1;
	}100%{
		-webkit-transform:scale(1);
		transform:scale(1);
		opacity:0;
	}
}

/* 兼容Firefox */
@-moz-keyframes warn{
	0%{
		-moz-transform:scale(0);
		transform:scale(0);
		opacity:1;
	}100%{
		-moz-transform:scale(1);
		transform:scale(1);
		opacity:0;
	}
}

/* 兼容Opera */
@-o-keyframes warn{
	0%{
		-o-transform:scale(0);
		transform:scale(0);
		opacity:1;
	}100%{
		-o-transform:scale(1);
		transform:scale(1);
		opacity:0;
	}
}

@keyframes warn{
	0%{
		-webkit-transform:scale(0);
		-moz-transform:scale(0);
		-o-transform:scale(0);
		transform:scale(0);
		opacity:1;
	}
	100%{
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
		-o-transform:scale(1);
		transform:scale(1);
		opacity:0;
	}
}

.area-box .dot{
	position:absolute;
	left:0;
	width:10px;
	height:10px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	background:#a2a9b4;
	opacity:1;
	filter:alpha(opacity=100);
}
.area-box .pulse{
	position:absolute;
	top:-28px;
	left:-28px;
	height:66px;
	width:66px;
	border:2px solid #b7b7b7;
	-webkit-border-radius:48px;
	-moz-border-radius:48px;
	border-radius:48px;
	-webkit-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;
	-moz-box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;
	box-shadow:0 0 4px #82878f,0 0 10px #82878f inset;
	opacity:.12;filter:alpha(opacity=0);
	-webkit-animation:warn 2s ease-out both;
	-moz-animation:warn 2s ease-out both;
	-o-animation:warn 2s ease-out both;
	animation:warn 2s ease-out both;
	-webkit-animation-iteration-count:infinite;
	-moz-animation-iteration-count:infinite;
	-o-animation-iteration-count:infinite;
	animation-iteration-count:infinite;
	background:0 0;
}

.area-box .delay-01{
	-webkit-animation-delay:0;
	-moz-animation-delay:0;
	-o-animation-delay:0;
	animation-delay:0;
}
	
.area-box .delay-02{
	-webkit-animation-delay:.4s;
	-moz-animation-delay:.4s;
	-o-animation-delay:.4s;
	animation-delay:.4s;
}

.area-box .delay-03{
	-webkit-animation-delay:.8s;
	-moz-animation-delay:.8s;
	-o-animation-delay:.8s;
	animation-delay:.8s;
}

.area-box .delay-04{
	-webkit-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
	-o-animation-delay:1.2s;
	animation-delay:1.2s;
}

.area-box .delay-05{
	-webkit-animation-delay:1.6s;
	-moz-animation-delay:1.6s;
	-o-animation-delay:1.6s;
	animation-delay:1.6s;
}

.area-box .delay-06{
	-webkit-animation-delay:2s;
	-moz-animation-delay:2s;
	-o-animation-delay:2s;
	animation-delay:2s;
}

.area-box .delay-07{
	-webkit-animation-delay:2.4s;
	-moz-animation-delay:2.4s;
	-o-animation-delay:2.4s;
	animation-delay:2.4s;
}

.area-box .delay-08{
	-webkit-animation-delay:-.4s;
	-moz-animation-delay:-.4s;
	-o-animation-delay:-.4s;
	animation-delay:-.4s;
}
.area-box .delay-09{
	-webkit-animation-delay:-.8s;
	-moz-animation-delay:-.8s;
	-o-animation-delay:-.8s;
	animation-delay:-.8s;
}

.area-box .delay-10{
	-webkit-animation-delay:-1.2s;
	-moz-animation-delay:-1.2s;
	-o-animation-delay:-1.2s;
	animation-delay:-1.2s;
}

.area-box .delay-11{
	-webkit-animation-delay:4s;
	-moz-animation-delay:4s;
	-o-animation-delay:4s;
	animation-delay:4s;
}

.region-list.active .area-box .dot{background:#009fd9;}

.region-list.active .area-box .pulse{
	border-color:#009fd9;
	top:-39px;
	left:-39px;
	height:88px;
	width:88px;
	-webkit-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;
	-moz-box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;
	box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset;
}
.region-list.waite .area-box .dot{background:#f90;}
.region-list.waite .area-box .pulse{border-color:#f90;}

.show-regin{
	position:absolute;
	left:2px;
	height:0;
	top:0;
	width:11px;
	opacity:0;
	-o-transition:all .5s ease-in-out;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;
}
.online-node .show-regin,
.region-list:hover .show-regin,
.underline-node .show-regin,
.waite-node .show-regin{height:127px;opacity:1;}

.show-regin span{
	width:80px;
	position:absolute;
	left:8px;
	top:-11px;
	padding:6px 10px;
	font-size:14px;
	color:#ccc;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	text-align:center;
	white-space:nowrap;
}

.postition-10 .show-regin span{left:0;}
.postition-6 .show-regin span{left:-72px;}
.area-box{z-index:77;}
.show-regin{z-index:66;}
.region-list.active .show-regin span{position:relative;color:#ccc;}
.region-list.waite .show-regin span{color:#ccc;}
.postition-1{left:302px;top:308px;}
.postition-2{left:401px;top:403px;}
.postition-3{left:358px;top:516px;}
.postition-4{left:473px;top:348px;}
.postition-5{left:526px;top:394px;}
.postition-6{left:526px;top:515px;}
.postition-7{left:652px;top:200px;}

.postition-7.region-list.active .area-box .pulse{
	top:-50px;
	left:-50px;
	width:110px;
	height:110px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}

.postition-8{left:559px;top:229px;}
.postition-9{left:637px;top:371px;}

.postition-9.region-list.active .area-box .pulse{
	top:-50px;
	left:-50px;
	width:110px;
	height:110px;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
}
.postition-10{left:554px;top:539px;}
.postition-11{left:604px;top:300px;}
.postition-13{left:470px;top:250px;}
.douhao{width:0;}
十六进制呀
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单的CSS3地图位置标记动画特效
06-11
这是一款简单的带有动画效果的CSS3地图位置标记动画特效，CSS3位置图标标注代码。
css3中插入地图,CSS3 地图展开动画
weixin_33711795的博客
08-03 390
CSS语言：CSSSCSS确定html,body {height: 100%;margin: 0;padding: 0;background-color: #345761;overflow: hidden;}p {margin-top: 3rem;color: #c6d7dc;text-align: center;font-family: monospace;font-size: 1.1rem;}...
超绚丽的HTML5地图分布动画
12-21
超绚丽的HTML5地图分布动画，每个区域展示不同的效果。
纯CSS3地图位置标记动画特效.zip
07-11
纯CSS3地图位置标记动画特效是一款带有动画效果的CSS3位置标注特效。
超绚丽的HTML5地图分布动画DEMO演示
05-02
超绚丽的HTML5地图分布动画DEMO演示
使用CSS3设计地图上的雷达定位提示效果
01-21
近期工作要做一个用于图像定位的标识，为了让这个指示标识不死板，决定做个简单的动画，动画效果像波浪一样波动，这样标识就更美观好看了，喜欢的同学可以跟着来学，十分简单，欢迎指正交流。 先上效果图： 本动画...
CSS3地图动态实例代码(圆圈向外扩散)
01-21
实例要点：主要考察CSS3中动画的使用 主要代码： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>地图</title> <style> *{padding:0px;margin: 0...
HTML+CSS实战视频课程
06-13
包括HTML5概述、Web开发历史、HTML5文档结构异同与创建HTML5文档、设计HTML5表单、使用HTML5绘画、HTML5音频与视频、如何实现Web本地存储、如何实现Web离线应用、如何设计多线程应用、如何实现移动互联网中地图定位...
html5 echarts地图分布动画特效特效代码
03-20
html5 echarts地图分布动画特效是一款带有炫光效果的html5 echarts图表插件。
HTML5 SVG 世界地图旋转动画
08-23
这是一个以世界地图为背景的简易地球仪，通过HTML5和SVG的相关特性，实现了这个世界地图地球仪的旋转动画。地图旋转期间，会有飞机在地图上自由飞行，这样让这个动画更加逼真。与此相关的另外一个HTML5 Canvas 地球旋转3D动画也是非常的不错。
css雷达+3D地图
08-23
非常酷炫的雷达扫描和3D地图，css+js+html前端学习专用
echarts HTML5地图分布动画DEMO演示
09-20
echarts HTML5地图分布动画DEMO演示案例
HTML5实现的超酷3D实景地图动画特效源码
07-16
HTML5实现3D效果实景地图，是一款3D实景地图，截取了实景的房屋大厦，并且可以旋转展示，具有非常强的立体效果！
CSS3动画实现地图热点效果
sword_chiu的博客
06-02 834
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> @keyframes suo { 0% {} 70% { width: 40px; height: 40px;
html5 圆圈扩散,CSS3地图动态实例代码(圆圈向外扩散)
weixin_42353186的博客
05-31 684
实例效果图实例说明：在地图上定位多个不同的点，然后从点中央向外扩散光圈。实例要点：主要考察CSS3中动画的使用主要代码：地图*{padding:0px;margin: 0px;}.bg{width: 100%;height:770px;position: relative;}.bg img{width: 100%;height: 100%;}.bg .content{width: 748px;he...
刚学会 HTML5 不久，最近用 CSS3 实现了热点地图动画
实验楼--动手做实验，轻松学IT！
08-18 834
市面上大多数的热点地图，都是以 JavaScript 来做的，但是使用 CSS3 制作的热点地图倒还真的挺少见的。 其实 CSS3 的功能也很强大，能帮助我们实现很多用 JavaScript 实现的效果，最近小编刚学会 HTML5 和 简单的 CSS3，在这里用 CSS3 实现了热点地图动画，效果如下： 下面给大家初步讲讲，如何用 CSS3 制作一个热点地图，你可以学到 HTML 的布局、HTML 列表、CSS 选择器、CSS3 动画、CSS3 的 2D 转换等，对于练习 HTML、CSS 也有很好的帮助
HTML+CSS+JS实现echarts图表炫光分布地图动画
java李阳勇的博客
09-07 3221
效果演示： 代码目录： 主要代码实现： HTML代码 : <html lang="en"> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body style="background:#1B1B1B"> <!--Step:1 Prepare a dom for EChart...
原神页面设计html+css
最新发布
07-16
### 回答1： 原神页面设计主要涉及到HTML和CSS的运用。 在HTML中，我们可以使用各种标签来组织页面的结构。例如，使用<header>和<nav>标签定义页面的头部和导航栏，<main>标签定义页面的主要内容区域，<footer>标签定义页面的底部。同时，可以使用<div>标签来划分不同的区块，并为其添加class或id属性，以便于后续使用CSS样式进行样式的设定。 在CSS中，我们可以通过选择器来选择我们所需要修改样式的元素。通过为元素添加class或id属性，可以更加具体地选择元素。例如，可以通过选择器".header"来选择头部区域的元素，并进行样式的设定。同时，我们可以使用盒模型来确定元素的宽度、高度、边距和内边距，以及使用定位来控制元素的位置。通过设置颜色、字体、背景等属性，可以进一步美化页面。 为了提高页面的可读性和交互性，我们可以添加一些特效，如过渡效果和动画效果。通过CSS3中的过渡和动画属性，可以实现元素的逐渐变化、平滑过渡和动态效果。同时，通过JavaScript的运用，可以为页面添加一些交互功能，如按钮点击事件、图片轮播等。 在原神页面设计中，可以使用相关的图片和尺寸来制作页面背景、角色展示、关卡介绍等。同时，可以运用CSS样式对页面进行分栏布局，做出页面的美观和舒适的使用体验。 总结来说，原神页面设计主要运用HTML和CSS来组织页面的结构和样式，并通过特效和交互功能提升页面的可读性和交互性。 ### 回答2： 原神页面设计的HTML和CSS主要涉及到页面的结构和样式的设定。 1. HTML结构的设计：根据原神页面的内容和布局，使用HTML标签搭建出网页的整体结构。可以使用`<header>`标签定义网页的顶部导航栏，使用`<nav>`标签定义导航链接，使用`<main>`标签定义主要内容区域，使用`<footer>`标签定义网页的底部。 2. CSS样式的设定：使用CSS来设计原神页面的样式，可以通过选择器选择需要设定样式的HTML标签，然后设定相应的样式属性。例如，通过选择器选择导航栏的`<nav>`标签，然后设置背景色、字体大小、边距、居中等样式。 3. 页面布局的设定：使用CSS的布局模块（如Flexbox、Grid等）来实现页面的灵活布局。可以使用`display: flex`来实现水平或垂直方向的弹性布局，或者使用`grid-template-columns`来定义网格布局的列数和列宽。 4. 图片和背景的设定：原神页面通常包含大量的游戏截图和背景图，可以使用CSS设置相关的样式。可以使用`background-image`属性来设置背景图，使用`width`和`height`属性设置图片的尺寸，使用`object-fit`属性控制图片在容器中的填充方式。 5. 响应式设计：为了适应不同设备的屏幕尺寸，可以使用CSS的媒体查询来进行响应式设计。通过设置不同的CSS样式，可以根据屏幕的宽度和高度，调整页面布局和元素的样式。 总之，原神页面设计的HTML和CSS主要涉及到页面结构、样式设定、布局、图片及背景设置和响应式设计。通过合理应用这些技术，可以实现一个完美的原神页面设计。 ### 回答3： 原神是一款受欢迎的游戏，设计其网页页面需要使用HTML和CSS技术。 首先，我们需要创建一个HTML文件，并使用基本的HTML结构来布局页面。可以使用div元素来创建不同的部分，例如导航栏、主要内容和页脚。在导航栏中，我们可以使用ul和li元素来创建一个水平的菜单，并使用CSS样式来设置菜单项的样式，例如背景颜色、字体大小和边框等。 在主要内容区域，可以添加各种信息和图片来展示原神的角色、地图、任务等。可以使用div元素和CSS样式来设置每个区块的样式，例如边距、背景颜色和字体样式等。 另外，可以在页面中添加一些交互元素，例如按钮和表单，来增加用户的互动体验。可以使用button元素和CSS样式来设置按钮的样式，例如背景色、边框样式和悬停效果等。可以使用form元素和input元素来创建一个简单的表单，以便用户可以输入信息或进行搜索。 对于页面的整体布局和排版，可以使用CSS的布局技术，例如float、flexbox或grid等。这些技术可以帮助我们实现响应式布局，适应不同屏幕大小的设备。 最后，我们还可以使用CSS的动画和过渡效果来增加页面的动态效果。可以使用@keyframes规则来创建动画，并使用transition属性来设置元素的过渡效果。 总之，设计原神的网页页面时，我们需要使用HTML来创建页面结构，CSS来设置样式和布局。通过合理使用这些技术，可以创建一个吸引人的、用户友好的原神页面。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值