css模拟雷达扫描动画

news2025/3/15 17:18:38
      <div class="radar-scan">
        <div class="radar-container" />
      </div>

样式:

  .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;
    }
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2315565.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

冠珠瓷砖×郭培“惟质致美”品质主题片上映,讲述高定艺术背后的致美品质故事

168年前&#xff0c;一位英国服装设计师&#xff0c;开创了「高级定制」的先河。时至今日&#xff0c;从服装到各行各业「高级定制」始终代表着对完美的极致追求&#xff0c;成为了行业至高境界的象征。 被誉为“中国高定第一人”&#xff0c;高级定制服装设计师郭培&#xff0…

3DS模拟器使用(pc+安卓)+金手指+存档互传

1、引言 3ds模拟器已经能够在手机端近乎完美模拟了&#xff0c;那么多的3ds游戏&#xff0c;比玩手机游戏舒服多了。 本人是精灵宝可梦的老玩家&#xff0c;从第一世代就一直在玩&#xff0c;刚耍完NDS的第五世代&#xff0c;黑白系列。现在到宝可梦XY了&#xff0c;需要在3d…

从以太网 II 到 VLAN 和 Jumbo Frame:数据帧格式解读

以太网数据帧是计算机网络通信的基本单位&#xff0c;在不同的应用场景中&#xff0c;它的格式有所不同。根据协议标准和用途&#xff0c;以太网数据帧主要包括以太网 II 帧、IEEE 802.3 帧、IEEE 802.1Q VLAN 帧等七种主要类型。为了更好地理解以太网的通信机制&#xff0c;我…

X86 RouterOS 7.18 设置笔记六:端口映射(IPv4、IPv6)及回流问题

X86 j4125 4网口小主机折腾笔记五&#xff1a;PVE安装ROS RouterOS X86 RouterOS 7.18 设置笔记一&#xff1a;基础设置 X86 RouterOS 7.18 设置笔记二&#xff1a;网络基础设置(IPV4) X86 RouterOS 7.18 设置笔记三&#xff1a;防火墙设置(IPV4) X86 RouterOS 7.18 设置笔记四…

69.Harmonyos NEXT图片预览组件应用实践(二):电商、内容与办公场景

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT图片预览组件应用实践&#xff08;二&#xff09;&#xff1a;电商、内容与办公场景 文章目录 Harmonyos NEXT图片预览组件应用实践…

31.Harmonyos Next仿uv-ui 组件NumberBox 步进器组件异步操作处理

Harmonyos Next仿uv-ui 组件NumberBox 步进器组件异步操作处理 文章目录 Harmonyos Next仿uv-ui 组件NumberBox 步进器组件异步操作处理1. 组件介绍2. 效果展示3. 异步操作处理3.1 异步初始化3.2 异步值更新 4. 完整示例代码5. 知识点讲解5.1 异步操作基础5.2 异步操作中的状态…

mac安装python没有环境变量怎么办?zsh: command not found: python

在mac电脑上,下载Python安装包进行安装之后,在终端中,输入python提示: zsh: command not found: python 一、原因分析 首先,这个问题不是因为python没有安装成功的原因,是因为python安装的时候,没有为我们添加环境变量导致的,所以我们只需要,在.zshrc配置文件中加上环…

使用DeepSeek制作可视化图表和流程图

用DeepSeek来制作可视化图表&#xff0c;搭配python、mermaid、html来实现可视化&#xff0c;我已经测试过好几种场景&#xff0c;都能实现自动化的代码生成&#xff0c;效果还是不错的&#xff0c;流程如下。 统计图表 &#xff08;搭配Matplotlib来做&#xff09; Python中的…

jmeter-sample

jmeter-sample http request:接口测试常用请求参数ParametersBody DataFiles Upload jdbc request配置JDBC Connection Configuration创建JDBC Requst请求 http request:接口测试常用 请求参数 Parameters 常见于get请求&#xff0c;与拼在接口后面是一样的效果&#xff1a;如…

C++之文字修仙小游戏

1 效果 1.1 截图 游戏运行&#xff1a; 存档&#xff1a; 1.2 游玩警告 注意&#xff01;不要修改装备概率&#xff0c;装备的概率都是凑好的数字。如果想要速升&#xff0c;修改灵石数量 2 代码 2.1 代码大纲 1. 游戏框架与初始化 控制台操作&#xff1a;通过 gotoxy() …

MacOS 15.3.1 安装 GPG 提示Error: unknown or unsupported macOS version: :dunno

目录 1. 问题锁定 2. 更新 Homebrew 3. 切换到新的 Homebrew 源 4. 安装 GPG 5. 检查 macOS 版本兼容性 6. 使用 MacPorts 或其他包管理器 7. 创建密钥&#xff08;生成 GPG 签名&#xff09; 往期推荐 1. 问题锁定 通常是因为你的 Homebrew 版本较旧&#xff0c;或者你…

硬件驱动——51单片机:独立按键、中断、定时器/计数器

目录 一、独立按键 1.原理 2.封装函数 3.按键控制点灯 数码管 二、中断 1.原理 2.步骤 3.中断寄存器IE 4.控制寄存器TCON 5.打开外部中断0和1 三、定时器/计数器 1.原理 2.控制寄存器TCON 3.工作模式寄存器TMOD 4.按键控制频率的动态闪烁 一、独立按键 1…

P1259 黑白棋子的移动【java】【AC代码】

有 2n 个棋子排成一行&#xff0c;开始为位置白子全部在左边&#xff0c;黑子全部在右边&#xff0c;如下图为 n5 的情况&#xff1a; 移动棋子的规则是&#xff1a;每次必须同时移动相邻的两个棋子&#xff0c;颜色不限&#xff0c;可以左移也可以右移到空位上去&#xff0c;但…

67.Harmonyos NEXT 图片预览组件之性能优化策略

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT 图片预览组件之性能优化策略 文章目录 Harmonyos NEXT 图片预览组件之性能优化策略效果预览一、性能优化概述1. 性能优化的关键指标…

Windows下安装Git客户端

① 官网地址&#xff1a;https://git-scm.com/。 ② Git的优势 大部分操作在本地完成&#xff0c;不需要联网&#xff1b;完整性保证&#xff1b;尽可能添加数据而不是删除或修改数据&#xff1b;分支操作非常快捷流畅&#xff1b;与Linux 命令全面兼容。 ③ Git的安装 从官网…

SAP IBP for Supply Chain Certification Guide (Parag Bakde, Rishabh Gupta)

SAP IBP for Supply Chain Certification Guide (Parag Bakde, Rishabh Gupta)

如何处理PHP中的日期和时间问题

如何处理PHP中的日期和时间问题 在PHP开发中&#xff0c;日期和时间的处理是一个常见且重要的任务。无论是记录用户操作时间、生成时间戳&#xff0c;还是进行日期计算&#xff0c;PHP提供了丰富的函数和类来帮助开发者高效处理这些需求。本文将详细介绍如何在PHP中处理日期和…

TDengine 使用最佳实践

简介 阅读本文档需要具备的基础知识&#xff1a; Linux系统的基础知识&#xff0c;及基本命令网络基础知识&#xff1a;TCP/UDP、http、RESTful、域名解析、FQDN/hostname、hosts、防火墙、四层/七层负载均衡 本文档的阅读对象有&#xff1a;架构师、研发工程师&#xff0c;…

Spring、Spring Boot、Spring Cloud 的区别与联系

1. Spring 框架 定位&#xff1a;轻量级的企业级应用开发框架&#xff0c;核心是 IoC&#xff08;控制反转&#xff09; 和 AOP&#xff08;面向切面编程&#xff09;。 核心功能&#xff1a; 依赖注入&#xff08;DI&#xff09;&#xff1a;通过 Autowired、Component 等注解…

AutoGen-构建问答智能体

概述 如https://github.com/microsoft/autogen所述&#xff0c;autogen是一多智能体的框架&#xff0c;属于微软旗下的产品。 依靠AutoGen我们可以快速构建出一个多智能体应用&#xff0c;以满足我们各种业务场景。 环境说明 python&#xff0c;3.10AutoGen&#xff0c;0.4.2…