css制作雷达扫描的效果,利用CSS3实现雷达扫描效果图动画特效

round

.round {

border: 1px solid rgba(255, 255, 255, 0.5);

margin: 50px auto;

}

.w300 {

border-radius: 298px;

height: 298px;

margin-top: 0;

overflow: hidden;

width: 298px;

}

.w200 {

border-radius: 200px;

height: 200px;

width: 200px;

}

.w100 {

border-radius: 100px;

height: 100px;

width: 100px;

}

.w1 {

background-color: #fff;

border-radius: 1px;

height: 1px;

position: relative;

top: -4px;

width: 1px;

}

.line {

background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5)) repeat scroll 0 0;

border-left: 1px solid rgba(255, 255, 255, 0.6);

border-radius: 0 0 150px;

height: 150px;

left: 0;

position: absolute;

top: 0;

transform: rotate(0deg);

transform-origin: 0 0 0;

width: 150px;

}

.roundMove {

animation: 3s linear 0s normal both infinite running round;

}

@keyframes round {

100% {

transform: rotate(360deg);

}

}

@keyframes round {

100% {

transform: rotate(360deg);

}

}

[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]