【Golang语言社区】前端编程-利用CSS3实现雷达扫描效果图特效

效果图
<!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>