CSS实现loading图标

最新推荐文章于 2024-06-25 10:37:03 发布

原创最新推荐文章于 2024-06-25 10:37:03 发布 · 957 阅读

0 ·

CC 4.0 BY-SA版权

Css 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用CSS实现的动态加载效果，通过定位和动画控制，创建了八个同步但时间错位的绿色圆点，形成了独特的加载动画。文章详细解释了如何通过定位、旋转和动画延迟来实现这一效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>loading</title>
	<style>
	    *{
	    	margin: 0;padding: 0;
	    }
		.contont {
			height: 40px;width: 40px;
			top: 50%;left: 50%;
			position: absolute;
		}
		.contont p{
			height: 10px;
			width: 10px;
			border-radius: 5px;
			background: green;
			animation:mymove 1.5s infinite linear;
			position: absolute;
		}
		.contont .p1{
			top: 0;
			left: 0;
		}
		.contont .p2{
			top: 0;
			right: 0;
		}
		.contont .p3{
			right: 0;
			bottom: 0;
		}
		.contont .p4{
			left: 0;
			bottom: 0;
		}
		.contont:nth-child(2){
			transform: rotate(45deg);
		}
		@keyframes mymove{
			0% {
				transform: scale(0)
			}
			50% {
				transform: scale(1)
			}
			100% {
				transform: scale(0)
			}
		}
		.contont:nth-child(1) p:nth-child(1){
			animation-delay: -1.5s;
		}
		.contont:nth-child(2) p:nth-child(1){
			animation-delay: -1.3s;
		}
		.contont:nth-child(1) p:nth-child(2){
			animation-delay: -1.1s;
		}
		.contont:nth-child(2) p:nth-child(2){
			animation-delay: -0.9s;
		}
		.contont:nth-child(1) p:nth-child(3){
			animation-delay: -0.7s;
		}
		.contont:nth-child(2) p:nth-child(3){
			animation-delay: -0.5s;
		}
		.contont:nth-child(1) p:nth-child(4){
			animation-delay: -0.3s;
		}
		.contont:nth-child(2) p:nth-child(4){
			animation-delay: -0.1s;
		}
	</style>
</head>
<body>
	<div class="contont">
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
		<p class="p4"></p>
	</div>
	<div class="contont">
		<p class="p1"></p>
		<p class="p2"></p>
		<p class="p3"></p>
		<p class="p4"></p>
	</div>
</body>
</html>

思路：

在div中创建4个yua圆点，进行定位，然后再复制一份，进行45度旋转实现了八个点

进行animation动画，由于时间不同步，设置每个圆点的延迟时间，而负数就能实现了