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

网站开发定制: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>

底图 这里上传在这里
南宁小程序开发:www.zkelm.com

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值