css模拟雷达扫描动画

html 复制代码

      <div class="radar-scan">
        <div class="radar-container" />
      </div>

样式：

css 复制代码

  .radar-scan {
    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: 2rem 2rem;
    width: 200px;
    height: 200px;
    position: relative;
    padding: 0;
    margin: 0;
    font-size: 1.6rem;
  }
  .radar-container {
    // 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%,
    //     #20ff4d 18.6%,
    //     rgba(32, 255, 77, 0) 18.9%
    //   ),
    //   linear-gradient(
    //     90deg,
    //     rgba(32, 255, 77, 0) 49.5%,
    //     #20ff4d 50%,
    //     #20ff4d 50%,
    //     rgba(32, 255, 77, 0) 50.2%
    //   ),
    //   linear-gradient(
    //     0deg,
    //     rgba(32, 255, 77, 0) 49.5%,
    //     #20ff4d 50%,
    //     #20ff4d 50%,
    //     rgba(32, 255, 77, 0) 50.2%
    //   );
    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%,
          #20ff4d 18.6%,
          rgba(32, 255, 77, 0) 18.9%
        ),
      // 横线
      -webkit-linear-gradient(
          90deg,
          rgba(32, 255, 77, 0) 49.5%,
          #20ff4d 50%,
          #20ff4d 50%,
          rgba(32, 255, 77, 0) 50.2%
        ),
      // 竖线
      -webkit-linear-gradient(
          0deg,
          rgba(32, 255, 77, 0) 49.5%,
          #20ff4d 50%,
          #20ff4d 50%,
          rgba(32, 255, 77, 0) 50.2%
        );

    width: 200px;
    height: 200px;
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 0.2rem solid #0cdd36;
    overflow: hidden;
  }
  .radar-container:before {
    content: " ";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    animation: scanSpot 5s infinite;
    animation-timing-function: linear;
    animation-delay: 1.4s;
  }
  .radar-container:after {
    content: " ";
    display: block;
    background-image: linear-gradient(
      44deg,
      rgba(0, 255, 51, 0) 50%,
      #00bb22 100%
    );
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: scan 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
  }

  @keyframes scan {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes scanSpot {
    14% {
      background: radial-gradient(
        2vmin circle at 75% 70%,
        #ffffff 10%,
        #20ff4d 30%,
        rgba(255, 255, 255, 0) 100%
      );
    }
    14.0002% {
      background: radial-gradient(
          2vmin circle at 75% 70%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 63% 72%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        );
    }
    25% {
      background: radial-gradient(
          2vmin circle at 75% 70%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 63% 72%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 56% 86%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        );
    }
    26% {
      background: radial-gradient(
          2vmin circle at 75% 70%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 63% 72%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 56% 86%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        );
      opacity: 1;
    }
    100% {
      background: radial-gradient(
          2vmin circle at 75% 70%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 63% 72%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        ),
        radial-gradient(
          2vmin circle at 56% 86%,
          #ffffff 10%,
          #20ff4d 30%,
          rgba(255, 255, 255, 0) 100%
        );
      opacity: 0;
    }
  }