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;
    }
  }
相关推荐
Mintopia7 分钟前
🌀曲面细分求交:在无限细节中捕捉交点的浪漫
前端·javascript·计算机图形学
Mintopia10 分钟前
🧙‍♂️用 Three.js 判断一个点是否在圆内 —— 一次圆心和点的对话
前端·javascript·three.js
liliangcsdn25 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero28 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui32 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴35 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte38 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常40 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常41 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾42 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法