css模拟雷达扫描动画

embedded/2025/3/18 14:10:49/
      <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;}}


http://www.ppmy.cn/embedded/173612.html

相关文章

为wordpress核心functions文件瘦身

在wordpress主题开发过程中&#xff0c;常会用到functions.php这个文件&#xff0c;通过这个文件&#xff0c;可以让wordpress主题变得很强大。但是随着&#xff0c;功能的越来越多functions文件也会变得越来越臃肿庞大。要修改起functions文件来&#xff0c;也就越麻烦。特别是…

Unity物理射线滤除某层

关键点&#xff1a;使用LayerMask&#xff0c;针对Physics里检测collider的射线&#xff08;raycast、OverlapSphere...&#xff09;都适用 1.使用layerMask过滤层 int ignoreLayer LayerMask.NameToLayer("IgnoreRaycast");// 获取要忽略的层 int layerMask ~(1…

Lisp语言的网络管理

Lisp语言在网络管理中的应用 引言 随着网络技术的迅猛发展和信息化进程的加速&#xff0c;网络管理的复杂性逐渐增加。网络管理员需要处理大量的数据&#xff0c;监控网络的各个方面&#xff0c;并进行故障排查。在众多编程语言中&#xff0c;Lisp以其独特的特性和灵活性&…

C# 分部类 详解

从C#2.0起支持分部类。 分部类&#xff1a;是一个类的多个部分&#xff0c;编译器可把它们合并成一个完整的类。 分部类的目的&#xff1a;将一个类的定义划分到多个文件中。通过分部类&#xff0c;由工具处理的文件可独立于开发者手动编码的文件。 1.1定义分部类 使用clas…

LightGBM + TA-Lib A股实战进阶:Optuna调优与Plotly可视化详解

LightGBM TA-Lib A 股实战进阶&#xff1a;Optuna 调优与 Plotly 可视化详解 本文系统讲解了 LightGBM 在 A 股市场的应用&#xff0c;涵盖模型构建、Optuna 参数调优及 Plotly 可视化。通过实战案例&#xff0c;帮助读者全面掌握相关技术&#xff0c;提升在金融数据分析与预测…

机器视觉最佳光源方案 = 目标特征最大化 + 干扰最小化 + 环境适应性 + 成本可控,机器视觉检测项目中工业光源方案设计原则

机器视觉的最佳光源方案需要根据具体应用场景、检测目标、环境条件以及系统需求来综合设计。以下是一些关键原则和考虑因素,可帮助确定最佳光源方案: 核心目标 突出检测特征:光源应最大化目标与背景的对比度,突出关键特征(如边缘、缺陷、颜色差异)。 消除干扰:减少环境光…

从“笨重大象”到“敏捷火花”:Hadoop与Spark的大数据技术进化之路

从“笨重大象”到“敏捷火花”&#xff1a;Hadoop与Spark的大数据技术进化之路 说起大数据技术&#xff0c;Hadoop和Spark可以说是这个领域的两座里程碑。Hadoop曾是大数据的开山之作&#xff0c;而Spark则带领我们迈入了一个高效、灵活的大数据处理新时代。那么&#xff0c;它…

【华为OD-E卷 - 字符统计及重排 100分(python、java、c++、js、c)】

【华为OD-E卷 - 字符统计及重排 100分&#xff08;python、java、c、js、c&#xff09;】 题目 给出一个仅包含字母的字符串&#xff0c;不包含空格&#xff0c;统计字符串中各个字母&#xff08;区分大小写&#xff09;出现的次数&#xff0c;并按照字母出现次数从大到小的顺…