baozhida-deliver-medicine-app/static/css/styles.scss

.radar1 {
	width: 200rpx;
	height: 200rpx;
	position: relative;
	border-radius: 50%;
	border: 1px solid #cedbeb;
	background: #f2f4ff;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	.search {
		content: '';
		position: absolute;
		width: calc(200rpx / 2);
		height: calc(200rpx /2);
		background: linear-gradient(
			45deg,
			rgba(0, 0, 0, 0) 50%,
			rgba(169, 200, 246, 1) 100%
			);
		border-radius: 100% 0 0 0;
		top: -0.5px;
		left: -0.5px;
		animation: scanning 2s linear infinite;
		transform-origin: 100% 100%;
	}
	.startSearch{
		animation-play-state:paused;
		
	}
	@keyframes scanning {
		to {
			transform: rotate(1turn);
		}
	}
	.radar2{
		background: #e8f2fe;
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.radar3{
			background: #e0ecfc;
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			.radar4{
				background: #277afc;
				width:10rpx;
				height: 10rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}