css制作雷达扫描的效果,[每天进步一点点~] uni-app css 制作雷达扫描、波浪移动动画效果...

雷达扫描效果(背景换成纯色渐变了)：

一键巡检

.top {

width: 100%;

height: 720rpx;

// 上到下渐变

background-image: linear-gradient(#28BC3E, rgba(50,215,75,0.6));

// background-image: url(/static/intelligentThunder/2_1_Compress.gif);

// background-repeat: no-repeat;

// background-size:100% 720rpx;

.device-status {

width: 290rpx;

height: 290rpx;

border-radius: 50%;

background-color: rgba(255,229,193,0.4);

}

.radar {

width: 290rpx;

height: 290rpx;

border-radius: 50%;

font-size: 28rpx;

background-color: rgba(255,229,193,0.4);

position: relative;

.wave-box {

width: 290rpx;

height: 290rpx;

}

.test-btn {

// width: 156rpx;

// height: 56rpx;

// border-radius: 28rpx;

// background-color: #fff;

position: absolute;

left: 50%;

bottom: 15%;

transform: translate(-50%,-50%);

}

}

.radar::before {

content: '';

position: absolute;

width: calc(290rpx / 2);

height: calc(290rpx / 2);

background: linear-gradient(

45deg,

rgba(0, 0, 0, 0) 50%,