CSS3 制作大数据热点图

最新推荐文章于 2024-04-26 10:17:23 发布

RETURN100ERRORS

最新推荐文章于 2024-04-26 10:17:23 发布

阅读量1.5k

点赞数

分类专栏： CSS 文章标签： css3 css 动画

本文链接：https://blog.csdn.net/RETURN100ERRORS/article/details/124511081

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果图如下 :
在这里插入图片描述
主要使用了 css animation 属性 , 代码如下，附带地图
代码 :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.map{
			position: relative;
			background: url(img/222.png) no-repeat;
			background-size: cover;
			width: 900px;
			height: 500px;
		}
		.sign{
			position: absolute;
			top: 285px;
			left: 70px;
		}
		
		.sign .spot{
			position: relative;
			display: inline-block;
			margin-right: 10px;
			width: 8px;
			height: 8px;
			background-color: red;
			border-radius: 50%;
		}
		
		.sign > span {
			color: black;
			font-weight: 600;
		}
		
		/*  波纹 */
		.map div[class^="ripple"]{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 8px;
			height: 8px;
			border-radius: 50%;
			box-shadow: 0 0 12px #FF0000;
			animation: rippleMove 2.1s linear infinite;
		}
		
		/* 定义波纹动画 */
		@keyframes rippleMove{
			0%{
			}
			70%{
				opacity: 1;
				width: 40px;
				height: 40px;
			}
			100%{
				opacity: 0;
				width: 70px;
				height: 70px;
			}
		}
		 
		 /* 定义时差 */
		 .map .ripple2{
			 animation-delay: 0.7s !important;
		 }
		 
		 .map .ripple3{
			 animation-delay: 1.4s !important;
		 }
		
		
	</style>
	<body>
		<div class="map">
			<div class="sign">
				<div class="spot">
					<div class="ripple1"></div>
					<div class="ripple2"></div>
					<div class="ripple3"></div>
				</div>
				<span>旧金山</span>
			</div>
		</div>
	</body>
</html>

地图 :
在这里插入图片描述

RETURN100ERRORS

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3 制作大数据热点图

效果图如下 :主要使用了 css animation 属性 , 代码如下，附带地图代码 :<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> .map{ position: relative; background: url(img/222.png) no
复制链接

扫一扫