CSS实现loading效果

最新推荐文章于 2024-08-30 00:13:53 发布

风华正茂呀

最新推荐文章于 2024-08-30 00:13:53 发布

阅读量245

点赞数

分类专栏： html+CSS学习日记文章标签： css css3

本文链接：https://blog.csdn.net/weixin_42149770/article/details/104379502

版权

html+CSS学习日记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

loading其实就是八个小圆球有规律的放大缩小，注意放大缩小的顺序就行了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>londing</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			.circle{
				position: absolute;
				width: 30px;
				height: 30px;
				margin: 100px;
			}
			.circle p{
				position: absolute;
				width: 9px;
				height: 9px;
				border-radius: 50%;
				background-color: red;
				animation: move 1.5s infinite linear;
			}
			.circle p:nth-of-type(1){left: 0;top: 0;}
			.circle p:nth-of-type(2){right: 0;top: 0;}
			.circle p:nth-of-type(3){left: 0;bottom: 0;}
			.circle p:nth-of-type(4){right: 0;bottom: 0;}
		.circle:nth-of-type(2){transform: rotate(45deg);}
		.circle:nth-of-type(1) p:nth-of-type(1){animation-delay: -0.1s;}
		.circle:nth-of-type(2) p:nth-of-type(1){animation-delay: -0.3s;}
		.circle:nth-of-type(1) p:nth-of-type(2){animation-delay: -0.5s;}
		.circle:nth-of-type(2) p:nth-of-type(2){animation-delay: -0.7s;}
		.circle:nth-of-type(1) p:nth-of-type(4){animation-delay: -0.9s;}
		.circle:nth-of-type(2) p:nth-of-type(4){animation-delay: -1.1s;}
		.circle:nth-of-type(1) p:nth-of-type(3){animation-delay: -1.3s;}
		.circle:nth-of-type(2) p:nth-of-type(3){animation-delay: -1.5s;}
		
		
		@keyframes move{
			0%{transform: scale(0);}
			50%{transform: scale(1);}
			100%{transform: scale(0);}
		}
		</style>
	</head>
	<body>
		<div class="circle">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
		<div class="circle">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>