CSS3如何实现雷达扫描图

tangjin

作者

这篇文章给大家分享的是有关CSS3如何实现雷达扫描图的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

通过css3实现炫酷的雷达扫描图：

直接上代码：

//index.html
<!DOCTYPEhtml>
<html>

<head>
<metacharset="UTF-8">
<title>雷达扫描图</title>

<linkrel="stylesheet"href="css/index.css">

</head>

<body>

<divclass="radar"></div>

</body>

</html>

//index.css
*{
box-sizing:border-box;
}

html{
height:100%;
background-color:#111;
font-size:10px;
}


body{
background-image:
linear-gradient(0deg,transparent24%,rgba(32,255,77,0.15)26%,transparent27%,transparent74%,rgba(32,255,77,0.15)76%,transparent77%,transparent),
linear-gradient(90deg,transparent24%,rgba(32,255,77,0.15)26%,transparent27%,transparent74%,rgba(32,255,77,0.15)76%,transparent77%,transparent);
background-size:8rem8rem;
width:100%;
height:100%;
position:relative;
padding:0;
margin:0;
font-size:1.6rem;
}

.radar{
background:
-webkit-radial-gradient(center,rgba(32,255,77,0.3)0%,rgba(32,255,77,0)75%),
-webkit-repeating-radial-gradient(rgba(32,255,77,0)5.8%,rgba(32,255,77,0)18%,#20ff4d18.6%,rgba(32,255,77,0)18.9%),
-webkit-linear-gradient(90deg,rgba(32,255,77,0)49.5%,#20ff4d50%,rgba(32,255,77,0)50.2%),
-webkit-linear-gradient(0deg,rgba(32,255,77,0)49.5%,#20ff4d50%,rgba(32,255,77,0)50.2%);
width:75vw;
height:75vw;
max-height:75vh;
max-width:75vh;
position:relative;
left:50%;
top:50%;
/*元素居中定位*/
transform:translate(-50%,-50%);
border-radius:50%;
border:0.2remsolid#20ff4d;
overflow:hidden;
}

.radar:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
border-radius:50%;
animation:blips5sinfinite;
animation-timing-function:linear;
animation-delay:1.4s;
}

.radar:after{
content:'';
display:block;
background-image:linear-gradient(44deg,rgba(0,255,51,0)50%,#00ff33100%);
width:50%;
height:50%;
position:absolute;
top:0;
left:0;
animation:radar-beam5sinfinite;
/*速度相同*/
animation-timing-function:linear;
transform-origin:bottomright;
border-radius:100%000;
}

@keyframesradar-beam{
0%{
transform:rotate(0deg);
}

100%{
transform:rotate(360deg);
}
}

@keyframesblips{
14%{
background:radial-gradient(2vmincircleat75%70%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%);
}

14.0002%{
background:radial-gradient(2vmincircleat75%70%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat63%72%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%);
}

25%{
background:radial-gradient(2vmincircleat75%70%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat63%72%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat56%86%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%);
}

26%{
background:radial-gradient(2vmincircleat75%70%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat63%72%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat56%86%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%);
opacity:1;
}

100%{
background:radial-gradient(2vmincircleat75%70%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat63%72%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%),radial-gradient(2vmincircleat56%86%,#ffffff10%,#20ff4d30%,rgba(255,255,255,0)100%);
opacity:0;
}
}

感谢各位的阅读！关于“CSS3如何实现雷达扫描图”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

阅读全文

发布于 2021-03-17 20:51:19

css3