利用css3实现雷达扫描效果图特效代码

2016-07-20 网页编程网 网页编程网

<!DOCTYPE html><html><head><meta charset="UTF-8" /><title>round</title>
  <style type="text/css">
  .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);
}
}
  </style>
</head>
<body style="background: rgb(0, 0, 0) none repeat scroll 0% 0%; margin: 0px;">
  <div class="round w300">
        <div class="round w200">
            <div class="round w100">
                <div class="round w1">
                    <div class="line roundMove"></div>
                </div>
            </div>
        </div>
    </div>
</body></html>

阅读原文

阅读 4159

123 显示电脑版