代码如下:
<!DOCTYPE html>
<html>
<head>
<title>雷达</title>
<meta charset="UTF-8" />
<style>
*{
margin:0px;
padding:0px;
}
.bg{
background-color:black;
width:100%;
height:600px;
position:absolute;
}
.box{
width:200px;
height:200px;
margin:100px auto;
border-radius:50%;
}
.border-line{
border:1px solid #fff;
}
.box2{
width:150px;
height:150px;
margin:25px auto;
border-radius:50%;
}
.box3{
width:80px;
height:80px;
margin:30px auto;
border-radius:50%;
}
.line{
position:absolute;
width:100px;
height:100px;
top:200px;
left:50%;
border-radius:0px 0px 100px 0px;/*左上,右上,右下,左下*/
background:-moz-linear-gradient(50px 100px,#7FFFD4,transparent);
background: -webkit-gradient(linear, 0% 100% ,0% 0%, from(#7FFFD4), to(transparent));
animation:round 3s infinite;
animation-timing-function:linear;
}
@keyframes round{
0%{
transform-origin:0 0;
transform:rotate(0deg);
}
100%{
transform-origin:0 0;
transform:rotate(360deg);
}
}
.return{
bottom:50px;
right:50px;
position:fixed;
width:60px;
height:60px;
background-color:#ccc;
opacity:0.8;
color:green;
font-size:12px;
font-family:微软雅黑;
text-align:center;
line-height:60px;
border-radius:50%;
}
.return:hover{
opacity:1;
}
a{
color:green;
text-decoration:none;
}
</style>
</head>
<body>
<div class="bg">
<div class="box border-line">
<div class="box2 border-line">
<div class="box3 border-line">
<div class="line"></div>
</div>
</div>
</div>
</div>
<div class="return"><a href="../../coding.html">点我返回</a></div>
</body>
</html>