挑战百日学习计划第59天，(热图animation)

最新推荐文章于 2022-04-30 12:04:24 发布

zkelm.com

最新推荐文章于 2022-04-30 12:04:24 发布

阅读量214

点赞数 1

分类专栏：南宁小程序开发小程序南宁小程序文章标签： css html5 html

本文链接：https://blog.csdn.net/zkelm/article/details/120802533

版权

小程序同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

南宁小程序开发

25 篇文章 0 订阅

订阅专栏

南宁小程序

14 篇文章 0 订阅

订阅专栏

网站开发定制：www.zkelm.com
热图标注点，动态扩散效果，使用animation做
思路如下:
1.设置一个div 比如 city，然后使用绝对定位absolute 定位到对应的城市名称之中
然后分别做一个点和三个圈，分别设置绝对定位

<div class="city">				
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>

设置css

div.dotted{
				position: absolute;
				width: 8px;
				height: 8px;
				background-color: #006699;
				border-radius: 50%;
				transform: translate(-50%,-50%);
			}

这里需要做一个说明，因为扩大的位置是0 0 坐标，所以需要使用 transform：translate（-50%，-50%）来把扩散点放在中间位置。
代码如下

div.box div[class ^='pulse']{
				width: 8px;
				height: 8px;
				/* background-color: #0000FF; */
				animation: move 1.8s infinite;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left:50%;
				box-shadow:0 0 10px #0000ff;
				transform: translate(-50%,-50%);
				
			}

解决多个动画时差的问题方法
使用 animation-delay:1s

div.box div.pulse2{
				animation-delay: 0.3s;
			}
			div.box div.pulse3{
				animation-delay:0.6 s;
			}```

全部源码

```html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>热点图的制作animation</title>
		<style type="text/css">
			.box{
				margin: 20px;
				width: 640px;
				height: 481px;
				background: url("img/china.jpg") no-repeat;
				border: 1px solid #666;
				position: relative;
			}
			div.city{
				position: absolute;
				top:313px;
				left: 301px;
			}
			div.city2{
				position: absolute;
				top:130px;
				left: 149px;
			}
			div.city3{
				position: absolute;
				top:406px;
				left: 407px;
			}
			div.dotted{
				position: absolute;
				width: 8px;
				height: 8px;
				background-color: #006699;
				border-radius: 50%;
				transform: translate(-50%,-50%);
			}
			div.box div[class ^='pulse']{
				width: 8px;
				height: 8px;
				/* background-color: #0000FF; */
				animation: move 1.8s infinite;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				left:50%;
				box-shadow:0 0 10px #0000ff;
				transform: translate(-50%,-50%);
				
			}
			div.box div.pulse2{
				animation-delay: 0.3s;
			}
			div.box div.pulse3{
				animation-delay:0.6 s;
			}
			@keyframes move{
				0%{
					
				}
				100%{
					width:30px;
					height: 30px;
				}
				
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="city">				
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city2">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
			<div class="city3">
				<div class="dotted"></div>
				<div class="pulse1"></div>
				<div class="pulse2"></div>
				<div class="pulse3"></div>
			</div>
		</div>
	</body>
</html>