CSS アニメーションは、点滅するアニメーション GIF 効果、小さな円を実現します。

<div class="dataScreen-main-chart">
	<div v-show="state.safetyDoorNum === 0" class="big-data-down-center-two-content">
		<div class="circle" v-for="i in 4" :key="i"></div>
		<div class="text-box">
			<span class="text">暂无异常</span>
		</div>
	</div>
	<div v-show="state.safetyDoorNum > 0" class="warningBg" />
</div>
</div>

// gif动图
	.warningBg {
    
    
		width: 300px;
		height: 300px;
		background: url("./images/warning.png") 0 0 no-repeat;
		background-size: 300px 300px !important;
		animation: twinkling 0.8s infinite ease-in-out;
	}
	@keyframes twinkling {
    
    
		0% {
    
    
			opacity: 0.5;
		}
		100% {
    
    
			opacity: 1;
		}
	}

	//  暂无异常圆圈
	.big-data-down-center-one-content {
    
    
		width: 300px;
		height: 300px;
		margin: auto;
		margin-top: 45px;
		.circle {
    
    
			position: absolute;
			z-index: 10;
			background: #000000;
			background: rgb(0 0 0 / 1%);
			border-radius: 50%;
		}
		.text-box {
    
    
			z-index: 11;
			margin-top: auto;
			color: #c0d1f2;
			text-align: center;
			.text {
    
    
				font-size: 18px;
				font-weight: bold;
				line-height: 300px;
			}
		}
		.circle:nth-of-type(1) {
    
    
			width: 300px;
			height: 290px;
			box-shadow: 0 0 1px 0 #869fe4, inset 0 0 10px 0 #869fe4;
			animation: turnAround 6s infinite linear;
		}
		.circle:nth-of-type(2) {
    
    
			width: 285px;
			height: 300px;
			box-shadow: 0 0 1px 0 #3397f2, inset 0 0 10px 0 #3397f2;
			animation: turnAround 10s infinite linear;
		}
		.circle:nth-of-type(3) {
    
    
			width: 325px;
			height: 300px;
			box-shadow: 0 0 1px 0 #3eaadc, inset 0 0 10px 0 #3eaadc;
			animation: turnAround 5s infinite linear;
		}
		.circle:nth-of-type(4) {
    
    
			width: 300px;
			height: 325px;
			box-shadow: 0 0 1px 0 #0099ff, inset 0 0 10px 0 #0099ff;
			animation: turnAround 15s infinite linear;
		}
		@keyframes turnAround {
    
    
			100% {
    
    
				transform: rotate(360deg);
			}
		}
	}