CSS效果之雷达扫描效果

代码来自 https://github.com/Aaronliu2016/css-tricks

<!-- run -->
<style>
.bg{
 background-color: #212121;
  width: 600px;
  height:600px;
 display: flex;
  justify-content: center;
  align-items: center;
}
.radar {
  position: relative;
  width: 150px;
  height: 150px;
  background: transparent;
  border-radius: 75px;
  box-shadow: 25px 25px 75px rgba(0, 0, 0, 0.55);
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.radar::before {
  content: '';
  position: absolute;
  inset: 20px;
  background: transparent;
  border-radius: 50%;
  border: 1px dashed #444;
  box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
    inset 5px 5px 35px rgba(0, 0, 0, 0.25);
}

.radar::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border: 1px dashed#444;
  border-radius: 50%;
  box-shadow: inset -5px -5px 25px rgba(0, 0, 0, 0.25),
    inset 5px 5px 35px rgba(0, 0, 0, 0.25);
}

.radar span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 50%;
  height: 100%;
  background: transparent;
  transform-origin: top left;
  animation: radar 2s linear infinite;
  border-top: 1px dashed #fff;
}

.radar span::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: seagreen;
  transform-origin: top left;
  transform: rotate(-55deg);
  filter: blur(30px) drop-shadow(20px 20px 20px seagreen);
}

@keyframes radar {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

<div class="bg">
 <div class="radar">
    <span></span>
  </div>
</div>