仿雷达扫描

 <div class="container">

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

</div>

 css简单实现了一下,

  .container {
    width: 100%;
    height: 100%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .radar {
    width: 300px;
    height: 300px;
    border: rgba(50, 254, 253, .5) solid 1px;
    position: relative;
    border-radius: 50%;

    &::after {
      content: '';
      position: absolute;
      width: 150px;
      height: 150px;
      top: 0;
      left: 0;
      border-right: rgba(50, 254, 253, .3) solid 1px;
      background: linear-gradient(45deg,rgba(0, 0, 0, 0) 45%,rgba(50, 254, 253, .5) 100%);
      border-radius: 100% 0 0 0;
      animation: xuanzhuan 8s linear infinite;
      transform-origin: 100% 100%;
    }
  }

  @keyframes xuanzhuan {
    to {
      transform: rotateZ(360deg);
    }
  }