CSS雷达动画实现
思路同时改变透明度和圆圈的大小，无限循环
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
.container {
position: relative;
border: 1px solid #000;
background: #f55e55;
}
.part {
position: relative;
margin: 200px auto;
width: 90px;
height: 90px;
background: #f55e55;
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse-max {
position: absolute;
width: 90px;
height: 90px;
background: #fff;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
animation-delay: 0.2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse-mid {
position: absolute;
left: 4px;
top: 4px;
width: 82px;
height: 82px;
background: #ff5e39;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 1.8s ease-out;
-moz-animation: warn 1.8s ease-out;
animation: warn 1.8s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.pulse-min {
position: absolute;
left: 7px;
top: 7px;
width: 76px;
height: 76px;
background: #fff;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 2s ease-out;
-moz-animation: warn 2s ease-out;
animation: warn 2s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
.dot {
position: absolute;
left: 20px;
top: 20px;
width: 50px;
height: 50px;
line-height: 50px;
color: #ff5e39;
border-radius: 50%;
background: #fff;
z-index: 999;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="part">
<div class="pulse-max"></div>
<div class="pulse-mid"></div>
<div class="pulse-min"></div>
<div class="dot">额头</div>
</div>
</div>
</body>
</html>
