当前位置: 首页 > news >正文

CSS雷达光波效果(前端雷达光波效果)

前言

CSS雷达光波效果是一种视觉动画效果,常用于模仿雷达扫描或检测的视觉反馈。这种效果通常涉及到动态的圆形或弧形图案,它们从一个中心点向外扩散,类似于水面上的涟漪或雷达扫描线。以下是创建CSS雷达光波效果的一些关键技术和步骤,这里提供两种效果 ,简单记录一下


一. First

1. HTML 结构

<div class="radar_container"><div class="radar_wave"></div><div class="radar_wave"></div><div class="radar_wave"></div>
</div>

2. CSS 内容 

  .radar_container {margin: auto;position: relative;width: 200px;height: 200px;// background-color: #000;border-radius: 50%;overflow: hidden;cursor: pointer;display: flex;align-items: center;justify-content: center;}.radar_wave {position: absolute;width: 20px;height: 20px;border: 1px solid #00ff00;border-radius: 50%;transform: scale(0); // 初始状态改为从中间开始box-shadow: inset 0 0 5px 1px #00ff00; // 添加阴影animation: radar_wave-animation 3s infinite;}.radar_wave:nth-child(1) {animation-delay: 0s;}.radar_wave:nth-child(2) {animation-delay: 1s;}.radar_wave:nth-child(3) {animation-delay: 2s;}@keyframes radar_wave-animation {0% {transform: scale(0); // 从中间开始opacity: 1;}100% {transform: scale(10); // 扩散到原来的10倍大小opacity: 0;}}


二. Second

1. HTML 结构同上,CSS 内容请看以下 

  .radar_container {margin: auto;position: relative;width: 200px;height: 200px;// background-color: #000;border-radius: 50%;overflow: hidden;cursor: pointer;}.radar_wave {position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;background-color: #8080ff;border-radius: 50%;transform: translate(-50%, -50%) scale(1);animation: radar_wave-animation 3s infinite;}.radar_wave:nth-child(1) {animation-delay: 0s;}.radar_wave:nth-child(2) {animation-delay: 1s;}.radar_wave:nth-child(3) {animation-delay: 2s;}@keyframes radar_wave-animation {0% {transform: scale(0); // 从中间开始opacity: 1;}100% {transform: scale(10); // 扩散到原来的10倍大小opacity: 0;}}

感觉有用,就一键三连,感谢(●'◡'●)

相关文章:

CSS雷达光波效果(前端雷达光波效果)

前言 CSS雷达光波效果是一种视觉动画效果&#xff0c;常用于模仿雷达扫描或检测的视觉反馈。这种效果通常涉及到动态的圆形或弧形图案&#xff0c;它们从一个中心点向外扩散&#xff0c;类似于水面上的涟漪或雷达扫描线。以下是创建CSS雷达光波效果的一些关键技术和步骤&#…...

【C语言】【数据结构】冒泡排序及优化

一、算法思想 冒泡排序是一种简单的排序算法。一次从前往后地走访待排序的元素序列被称为一趟&#xff0c;每一趟都会把相邻的两个元素的错误顺序交换&#xff0c;将当前趟次中最大或者最小的元素像“冒泡泡”一样冒到最后面&#xff0c;反复地走访元素序列&#xff0c;直到所有…...

3种 Ajax 方式:原生、jQuery、axios

毋庸多言&#xff0c;Ajax 技术在网页中是划时代的进步。学会它&#xff0c;可以说掌握了一招半式&#xff0c;不再是门外汉了。 这里将 3 种 Ajax 方式一并呈上。 感谢 https://run.uv.cc/ 平台&#xff0c;以及 /api 接口 https://andi.cn/page/621639.html https://andi…...

Node.js 根据表结构动态生成目标代码

文章目录 前言项目背景使用的技术栈步骤一&#xff1a;设置 Node.js 项目步骤二&#xff1a;连接 SQL Server 数据库步骤三&#xff1a;查询数据库表结构步骤四&#xff1a;生成模板代码步骤五&#xff1a;整合所有功能总结 前言 在现代的前端开发中&#xff0c;使用 Vue3 搭配…...

渗透测试实战—云渗透(AK/SK泄露)

免责声明&#xff1a;文章来源于真实渗透测试&#xff0c;已获得授权&#xff0c;且关键信息已经打码处理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本…...

【机器学习】机器学习与医疗健康在疾病预测中的融合应用与性能优化新探索

文章目录 引言第一章&#xff1a;机器学习在医疗健康中的应用1.1 数据预处理1.1.1 数据清洗1.1.2 数据归一化1.1.3 特征工程 1.2 模型选择1.2.1 逻辑回归1.2.2 决策树1.2.3 随机森林1.2.4 支持向量机1.2.5 神经网络 1.3 模型训练1.3.1 梯度下降1.3.2 随机梯度下降1.3.3 Adam优化…...

MySQL(8.0)数据库安装和初始化以及管理

1.MySQL下载安装和初始化 1.下载安装包 下载地址&#xff1a;https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar wget https://downloads.mysql.com/archives/get/p/23/file/mysql-8.0.33-1.el7.x86_64.rpm-bundle.tar 2.解压…...

C# Web控件与数据感应之 TreeView 类

目录 关于 TreeView 一些区别 准备数据源 范例运行环境 一些实用方法 获取数据进行呈现 ​根据ID设置节点 获取所有结点的索引 小结 关于 TreeView 数据感应也即数据捆绑&#xff0c;是一种动态的&#xff0c;Web控件与数据源之间的交互&#xff0c;本文将继续介绍与…...

java使用责任链模式进行优化代码

1.什么是责任链 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09;是一种行为设计模式&#xff0c;它允许多个对象有机会处理请求&#xff0c;从而避免请求的发送者和接收者之间的耦合关系。每个收到请求的对象要么处理该请求&#xff0c;要么将它传递给链中…...

【人工智能】边缘计算与 AI:实时智能的未来

&#x1f48e; 我的主页&#xff1a;2的n次方_ &#x1f48e;1. 引言 随着物联网设备数量的爆炸性增长和对实时处理需求的增加&#xff0c;边缘计算与人工智能&#xff08;Edge AI&#xff09;成为一个热门话题。Edge AI 通过在本地设备上运行 AI 算法&#xff0c;减少对云计…...

Day12--Servlet实现前后端交互(案例:学生信息管理系统登录页面)

&#xff08;在一个完整的项目架构中&#xff0c;servlet的角色和位置&#xff09; Servlet、GenericServlet和HttpServlet三者之间的关系是Java Web开发中的一个重要概念&#xff0c;它们共同构成了基于Java的服务器端程序的基础。以下是具体分析&#xff1a; 1. Servlet接口…...

Android 安装应用-准备阶段

安装应用的准备阶段是在PackageManagerService类中的preparePackageLI(InstallArgs args, PackageInstalledInfo res)&#xff0c;代码有些长&#xff0c;分段阅读。 分段一 分段一&#xff1a; GuardedBy("mInstallLock")private PrepareResult preparePackageLI(I…...

【JKI SMO】框架讲解(九)

本节内容将演示如何向SMO框架添加启动画面。 1.打开LabVIEW新建一个空白项目&#xff0c;并保存。 2.找到工具&#xff0c;打开SMO Editor。 3.新建一个SMO&#xff0c;选择SMO.UI.Splash。 4. 打开LabVIEW项目&#xff0c;可以看到项目里多了一个SystemSplash类。 打开Process…...

Linux通过Docker安装Microsoft Office+RDP远程控制

之前根据B站教程《在linux上安装微软office》&#xff1a;在linux上安装微软office_哔哩哔哩_bilibili 写过一篇使用KVM虚拟机安装Microsoft OfficeRDP远程控制的文章&#xff0c;根据B站的教程安装后&#xff0c;发现有远程控制延迟的问题&#xff0c;比如拖动Office窗口时会…...

利用Qt实现调用文字大模型的API,文心一言、通义千问、豆包、GPT、Gemini、Claude。

利用Qt实现调用文字大模型的API&#xff0c;文心一言、通义千问、豆包、GPT、Gemini、Claude。 下载地址: AI.xyz 1 Qt实现语言大模型API调用 视频——Qt实现语言大模型API调用 嘿&#xff0c;大家好&#xff01;分享一个最近做的小项目 “AI.xyz” 基于Qt实现调用各家大模型…...

借助医疗保健专用的 LLM提高诊断支持与准确性

概述 最近的研究表明&#xff0c;大规模语言模型在医疗人工智能应用中非常有效。它们在诊断和临床支持系统中的有效性尤为明显&#xff0c;在这些系统中&#xff0c;它们已被证明能为各种医疗询问提供高度准确的答案&#xff08;例如&#xff0c;医生在诊断过程中需要用到语言…...

微前端(qiankun)

微前端 特点&#xff1a;独立开发、独立部署&#xff0c;独立运行&#xff0c;增量升级 解决的问题&#xff1a;日常开发过程中&#xff0c;可能有很多老项目需要迭代&#xff0c;但是可能新的一些可能需要使用的依赖或者新的一些框架&#xff0c;老项目已经不满足&#xff0c;…...

速通c++(周二)

前言 Hello&#xff0c;大家好啊&#xff0c;我是文宇&#xff0c;不是文字&#xff0c;是文宇哦。 今天是速通c第二期。 运算符 c里的运算符种类有很多&#xff0c;因为这个教程是入门教程&#xff0c;所以只介绍其中我们会用到的几种。 算数运算 c中的算数运算有九个&a…...

拓扑未来物联网平台简介

拓扑未来物联网平台是基于Thingsboard二次开发的面向产业互联和智慧生活应用的物联网PaaS平台&#xff0c;支持适配各种网络环境和协议类型&#xff0c;可实现各种传感器和智能硬件的快速接入。有效降低物联网应用开发和部署成本&#xff0c;满足物联网领域设备连接、智能化改造…...

软件测试经理工作日常随记【7】-接口+UI自动化(多端集成测试)

软件测试经理工作日常随记【7】-UI自动化&#xff08;多端集成测试&#xff09; 自动化测试前篇在此 前言 今天开这篇的契机是&#xff0c;最近刚好是运维开发频繁更新证书的&#xff0c;每次更新都在0点&#xff0c;每次一更新都要走一次冒烟流程。为了不让我的美容觉被阉割…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

TDengine 快速体验(Docker 镜像方式)

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

【位运算】消失的两个数字(hard)

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南

文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/55aefaea8a9f477e86d065227851fe3d.pn…...