一个很简单的css加载的小动画

最新推荐文章于 2024-07-16 15:32:05 发布

liangyk1005

最新推荐文章于 2024-07-16 15:32:05 发布

阅读量174

点赞数

文章标签： css

本文链接：https://blog.csdn.net/liangyk1005/article/details/106734021

版权

写的有点丑，效果就是几个点在那里转，常见的加载动画

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				position: absolute;
				top: 50%; 
				left: 50%;
				transform: translate(-50%,-50%);
				height: 100px;
				width: 100px;
				border: 1px solid black;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			#box1 span{
				position: absolute;
				border-radius: 50%;
				height: 5px; 
				width: 5px;
				background-color: black;
			}
		
			@keyframes wave{
				0%{
					opacity: 0;
				}
				50%{
					opacity: 1;
				}
				100%{
					opacity: 0;
				}
			}
			
		</style>
	</head>
	<body>
		<div id="box1">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</body>
	<script type="text/javascript">
		let dots = document.querySelectorAll('span')
		dots.forEach((dot,index) => {
			//animation的总时间
			let total = .8
			//每个点的延迟时间
			let delay = .1
			dot.style.transform=`translate(${Math.sin(Math.PI*index/4)*10}px,${-Math.cos(Math.PI*index/4)*10}px)`
			dot.style.animation=`wave ${total}s ${delay*(index-1)}s linear infinite both`
		}) 
	</script>
</html>