学习CSS3雷达扫描动画特效代码
制作一个支持图片的雷达效果动画
效果
CSS3样式表
style.css
* {
box-sizing: border-box
}
html {
height: 100%;
background-color: #111;
font-size: 10px
}
body {
background-image: linear-gradient(0deg,transparent 24%,rgba(32,255,77,0.15) 25%,rgba(32,255,77,0.15) 26%,transparent 27%,transparent 74%,rgba(32,255,77,0.15) 75%,rgba(32,255,77,0.15) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32,255,77,0.15) 25%,rgba(32,255,77,0.15) 26%,transparent 27%,transparent 74%,rgba(32,255,77,0.15) 75%,rgba(32,255,77,0.15) 76%,transparent 77%,transparent);
background-size: 7rem 7rem;
background-position: -5.2rem -5.2rem;
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
font-size: 1.6rem
}
.radarCenter{
width:100%;
height:100%;
z-index:100;
}
.radar {
width: 75vw;
height: 75vw;
max-height: 75vh;
max-width: 75vh;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
overflow: hidden
}
.radar:before {
content: ' ';
display: block;
position: absolute;
width: 80%;
height: 80%;
border-radius: 50%;
animation: blips 5s infinite;
animation-timing-function: linear;
animation-delay: 1.4s
}
.radar:after {
content: ' ';
display: block;
background-image: linear-gradient(44deg,rgba(0,255,51,0) 50%,#3E8CC6 100%);
width: 50%;
height: 50%;
position: absolute;
top: 0;
left: 0;
animation: radar-beam 5s infinite;/*引用下方定义的动画radar-beam*/
animation-timing-function: linear;
transform-origin: bottom right;
border-radius: 100% 0 0 0
}
@keyframes radar-beam {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
@keyframes blips {
15% {
background:
radial-gradient(2vmin circle at 59% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%),
radial-gradient(2vmin circle at 66% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%);
}
55% {
background:
radial-gradient(2vmin circle at 59% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%),
radial-gradient(2vmin circle at 66% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%);
}
80% {
background:
radial-gradient(2vmin circle at 59% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%),
radial-gradient(2vmin circle at 66% 67%,#fff 10%,#3E8CC6 30%,rgba(255,255,255,0) 100%);
}
}网页
radar.html
<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>CSS3雷达扫描动画特效代码</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="radar">
<img class="radarCenter" src='radar-bg.png'>
</div>
</body>
</html>#资源
