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;
    }
  }
相关推荐
菜鸟una33 分钟前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年1 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
代码改变世界100861 小时前
像素策略游戏:资源战争
css·游戏·css3
文火冰糖的硅基工坊2 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088502 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring
yaoganjili2 小时前
用 Tinymce 打造智能写作
前端
angelQ2 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
Dontla2 小时前
(临时解决)Chrome调试避免跳入第三方源码(设置Blackbox Scripts、将目录添加到忽略列表、向忽略列表添加脚本)
前端·chrome
我的div丢了肿么办2 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js
云中雾丽2 小时前
React.forwardRef 实战代码示例
前端