.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; } } } }