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;
    }
  }
相关推荐
Whoisshutiao12 分钟前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿28717 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
做梦都在学习前端24 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz40 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini43 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆44 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户40812812003811 小时前
大文件分片上传和断点续传
前端
极客悟道1 小时前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅1 小时前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖1 小时前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js