圆点跳跃的加载样式

萬千

已于 2024-08-08 13:42:36 修改

阅读量144

点赞数 4

文章标签：动画 css css3 前端

于 2024-08-08 10:03:18 首次发布

本文链接：https://blog.csdn.net/Y1436314328/article/details/141019094

版权

更多样式：点击查看

效果

在这里插入图片描述

模板代码

<div class="indicator">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="shadow"></div>
	<div class="shadow"></div>
	<div class="shadow"></div>
</div>

样式代码

.indicator {
	width: 60px;
	height: 30px;
	position: relative;
	z-index: 4;
}

.circle {
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	background-color: #000;
	left: 15%;
	transform-origin: 50%;
	animation: circle-animation 0.5s alternate infinite ease;
}

@keyframes circle-animation {
	0% {
		top: 20px;
		height: 5px;
		border-radius: 50px 50px 25px 25px;
		transform: scaleX(1.7);
	}

	40% {
		height: 8px;
		border-radius: 50%;
		transform: scaleX(1);
	}

	100% {
		top: 0%;
	}
}

.circle:nth-child(2) {
	left: 45%;
	animation-delay: 0.2s;
}

.circle:nth-child(3) {
	left: auto;
	right: 15%;
	animation-delay: 0.3s;
}

.shadow {
	width: 5px;
	height: 4px;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.2);
	position: absolute;
	top: 30px;
	transform-origin: 50%;
	z-index: 3;
	left: 15%;
	filter: blur(1px);
	animation: shadow-animation 0.5s alternate infinite ease;
}

@keyframes shadow-animation {
	0% {
		transform: scaleX(1.5);
	}
	40% {
		transform: scaleX(1);
		opacity: 0.7;
	}
	100% {
		transform: scaleX(0.2);
		opacity: 0.4;
	}
}
.shadow:nth-child(4) {
	left: 45%;
	animation-delay: 0.2s;
}

.shadow:nth-child(5) {
	left: auto;
	right: 15%;
	animation-delay: 0.3s;
}