<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>CSS3实现雷达扫描特效</title>
<style>
*{
box-sizing:border-box;
}
html{
height:100%;
background-color:#380d0d;
font-size:10px;
}
body{
background-image:linear-gradient(0deg,transparent24%,rgba(32,255,77,0.15)25%,rgba(32,255,77,0.15)26%,transparent27%,transparent74%,rgba(32,255,77,0.15)75%,rgba(32,255,77,0.15)76%,transparent77%,transparent),linear-gradient(90deg,transparent24%,rgba(32,255,77,0.15)25%,rgba(32,255,77,0.15)26%,transparent27%,transparent74%,rgba(32,255,77,0.15)75%,rgba(32,255,77,0.15)76%,transparent77%,transparent);
background-size:7rem7rem;
background-position:-5.2rem-5.2rem;
width:100%;
height:100%;
position:relative;
padding:0;
margin:0;
font-size:1.6rem;
}
.tangjialing{
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%,#20ff4d50%,rgba(32,255,77,0)50.2%),-webkit-linear-gradient(0deg,rgba(32,255,77,0)49.5%,#20ff4d50%,#20ff4d50%,rgba(32,255,77,0)50.2%);
background:radial-gradient(center,rgba(32,255,77,0.3)0%,rgba(32,255,77,0)75%),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%),linear-gradient(90deg,rgba(32,255,77,0)49.5%,#20ff4d50%,#20ff4d50%,rgba(32,255,77,0)50.2%),linear-gradient(0deg,rgba(32,255,77,0)49.5%,#20ff4d50%,#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#0cdd36;;
overflow:hidden;
}
.tangjialing:before{
content:'';
display:block;
position:absolute;
width:100%;
height:100%;
border-radius:50%;
animation:bei5sinfinite;
animation-timing-function:linear;
animation-delay:1.4s;
}
.tangjialing:after{
content:'';
display:block;
background-image:linear-gradient(44deg,rgba(0,255,51,0)50%,#00bb22100%);
width:50%;
height:50%;
position:absolute;
top:0;
left:0;
animation:zhuan5sinfinite;
animation-timing-function:linear;
transform-origin:bottomright;
border-radius:100%000;
}
@keyframeszhuan{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}
@keyframesbei{
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;
}
}
</style>
</head>
<body>
<divclass="tangjialing"></div>
</body></html>
|
运行时间载入中.....