[游戏开发]好看的css预加载旋转动画

今天刚好在做这个功能，就实现一个 预加载的动画效果，随手记录

Html

<view class="concentric_round"></view>

css

body {
	background-color: #e9967a;
}
.concentric_round {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -100%);
}
.concentric_round::after,
.concentric_round::before {
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	opacity: 0.4;
	border-radius: 100%;
}

.concentric_round::before {
	width: 50%;
	height: 50%;
	animation: beform_round 0.6s ease-in-out infinite alternate;
}

.concentric_round::after {
	width: 100%;
	height: 100%;
	animation: after_round 0.6s ease-in-out infinite alternate;
}
/* 外圆 */
@-webkit-keyframes after_round {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(1.3);
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}
@keyframes after_round {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(1.3);
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}
/* 内圆 */
@-webkit-keyframes beform_round {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(0.7);
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}
@keyframes beform_round {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(0.7);
	}
	100% {
		transform: translate3d(-50%, -50%, 0) scale(1);
	}
}