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

css实现水波纹效果

news 2026/4/26 15:17:05

css实现水波纹效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wave-box {position: relative;width: 180px;height: 180px;border-radius: 50%;border: 3px solid rgb(246, 247, 248);box-shadow: 0 0 0 3px rgb(41, 134, 196);}.wave {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgb(23, 106, 201);border-radius: 50%;overflow: hidden;}.wave::before,.wave::after {content: '';position: absolute;top: 0;left: 50%;width: 250%;height: 250%;}.wave::after {border-radius: 40%;background-color: rgb(240, 228, 228);animation: shi 5s linear infinite;transform: translate(-50%, -65%) rotate(0deg)}@keyframes shi {0% {transform: translate(-50%, -65%) rotate(0deg);}100% {transform: translate(-50%, -65%) rotate(360deg);}}.wave::before {border-radius: 42%;background-color: rgb(240, 228, 228, 0.2);transform: translate(-50%, -60%) rotate(0deg);animation: xu 7s linear infinite;}@keyframes xu {0% {transform: translate(-50%, -60%) rotate(0deg);}100% {transform: translate(-50%, -60%) rotate(360deg);}}</style>
</head>
<body><div class="wave-box"><div class="wave"></div></div>
</body>
</html>

相关文章：

css实现水波纹效果

css实现水波纹效果 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><styl…...

编程日记 2023/11/24 12:52:31

一种全新且灵活的 Prompt 对齐优化技术

并非所有人都熟知如何与 LLM 进行高效交流。 一种方案是&#xff0c;人向模型对齐。 于是有了 「Prompt工程师」这一岗位&#xff0c;专门撰写适配 LLM 的 Prompt&#xff0c;从而让模型能够更好地生成内容。 而另一种更为有效的方案则是&#xff0c;让模型向人对齐。 这也是…...

编程日记 2023/11/24 12:51:29

8：kotlin 类型检查和转换（Type checks and casts）

在运行时可以执行类型检查以检查对象的类型。类型转换将对象强制转换为不同的类型 is 和 !is 可以使用is或者!is来判断实例是不是指定的类型 fun main() {var obj : Any "cast"if (obj is String) {println(obj.length) // 4}obj 123if (obj !is String) { pr…...

编程日记 2023/11/24 12:50:28

命令模式 (Command Pattern)

定义 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;它将一个请求封装为一个对象&#xff0c;从而允许用户使用不同的请求、队列或日志来参数化其他对象。命令模式也支持可撤销的操作。主要目的是将命令的发送者和接收者解耦&#xff0c;引…...

编程日记 2023/11/24 12:49:27

蓝桥杯官网练习题（奇怪的数列）

题目描述 从 X 星截获一份电码&#xff0c;是一些数字&#xff0c;如下&#xff1a; 13 1113 3113132113 1113122113 ⋯ YY 博士经彻夜研究&#xff0c;发现了规律&#xff1a; 第一行的数字随便是什么&#xff0c;以后每一行都是对上一行"读出来" 比如第 2…...

编程日记 2023/11/24 12:48:25

flink的异常concurrent.TimeoutException: Heartbeat of TaskManager with id的解决

背景 在使用flink进行集成测试时&#xff0c;我们会使用MiniClusterWithClientResource类&#xff0c;但是当我们断点导致在某个方法执行的时间比较长时&#xff0c;会有错误发生&#xff0c;那么该如何解决这个错误呢&#xff1f; 处理concurrent.TimeoutException: Heartbe…...

编程日记 2023/11/24 12:47:25

火电安全事故vr模拟仿真培训强交互更真实

VR消防&#xff0c;利用VR虚拟现实技术&#xff0c;将VR和消防教育融合在一起达到寓教于乐的效果&#xff0c; VR消防教育是对于家中、校园内、大型商场、公司办公室等情景产品研发的消防安全培训类VR系统软件&#xff0c;根据互动体验、互动、视角实际操作、视听觉系统多度自然…...

编程日记 2023/11/24 12:46:23

ELK企业级日志分析平台

目录 一、elasticsearch 1、集群部署 2、cerebro部署 3、elasticsearch-head插件部署 4、elasticsearch集群角色分类 二、logstash 1、部署 2、elasticsearch输出插件 3、file输入插件 4、file输出插件 5、syslog 插件 6、多行过滤插件 7、grok过滤 三、kibana数…...

编程日记 2023/11/24 12:45:22

.NET面试题1

1.什么是C#&#xff1f; C#&#xff08;读作"C sharp"&#xff09;是一种通用的、面向对象的编程语言&#xff0c;由Microsoft开发。它是一种静态类型语言&#xff0c;支持强类型检查和面向对象编程&#xff08;OOP&#xff09;的概念。C#主要用于开发Windows应用程序…...

编程日记 2023/11/24 12:44:21

mongodb 日志详情

1 mongodb日志简介 MongoDB的日志包括两个主要部分&#xff1a;操作日志&#xff08;oplog&#xff09;和系统日志。 1.1 操作日志 操作日志&#xff08;oplog&#xff09;是一个特殊的集合&#xff0c;用于记录所有对数据库进行的操作&#xff08;如插入、更新和删除&#x…...

编程日记 2023/11/24 12:43:19

Oracle中文显示???????解决办法

项目场景&#xff1a; Oracleoracle中文显示???解决办法 问题描述 原因分析&#xff1a; Oracle中文显示???通常是由于字符集不匹配或者编码问题导致的。当数据库中的数据使用的是某种字符集&#xff0c;而客户端或者应用程序使用的是另一种字符集时&#xff0c;就会出…...

编程日记 2023/11/24 12:42:18

Java查询数据放入word模板中并在前端导出下载

需求&#xff1a;查询数据放入word模板中并在前端导出下载 解决方法&#xff1a;在模板的位置定义参数如 {{name}} {{age}}等等&#xff0c;使用 poi 处理 伪代码&#xff1a; PostMapping("/practiceAppr")public AjaxResult practiceAppr(OutputStream outputSt…...

编程日记 2023/11/24 12:41:17

HarmonyOS ArkTS 应用添加弹窗（八）

概述 在我们日常使用应用的时候&#xff0c;可能会进行一些敏感的操作&#xff0c;比如删除联系人&#xff0c;这时候我们给应用添加弹窗来提示用户是否需要执行该操作&#xff0c;如下图所示&#xff1a; 弹窗是一种模态窗口&#xff0c;通常用来展示用户当前需要的或用户必须…...

编程日记 2023/11/24 12:40:16

排序算法-----快速排序（非递归实现）

目录 前言 快速排序 基本思路 非递归代码实现 算法分析 空间复杂度 时间复杂度 稳定性 前言 很久没跟新数据结构与算法这一栏了&#xff0c;因为数据结构与算法基本上都发布完了&#xff0c;哈哈&#xff0c;那今天我就把前面排序算法那一块的快速排序完善一下&#xff0…...

编程日记 2023/11/24 12:39:15

el-input限制输入整数等分析

文章目录 前言1、在 Vue 中&#xff0c;可以使用以下几种方式来限制 el-input 只能输入整数1.1 设置input 的 type为number1.2 使用inputmode1.3 使用自定义指令1.4 使用计算属性1.5 使用 onafterpaste ,onkeyup1.6 el-input-number 的precision属性 总结 前言 input 限制输入…...

编程日记 2023/11/24 12:38:14

医院手术麻醉信息系统全套源码，自主版权，支持二次开发

医院手术麻醉信息系统全套商业源码&#xff0c;自主版权&#xff0c;支持二次开发 手术麻醉信息系统是HIS产品的中的一个组成部分&#xff0c;主要应用于医院的麻醉科&#xff0c;属于电子病历类产品。医院麻醉监护的功能覆盖整个手术与麻醉的全过程&#xff0c;包括手术申请与…...

编程日记 2023/11/24 12:37:13

canvas扩展001：利用fabric绘制图形，可以平移，旋转，放缩

canvas可以使用Fabric.js来做扩展&#xff0c;您可以在画布上创建和填充对象&#xff1b; 诸如简单几何形状之类的对象 - 矩形、圆形、椭圆形、多边形或由数百或数千条简单路径组成的更复杂的形状。 然后&#xff0c;您可以使用鼠标缩放、移动和旋转这些对象&#xff1b; 修改它…...

编程日记 2023/11/24 12:35:11

什么是机器学习

前言 机器学习&#xff08;Machine Learning, ML&#xff09;是一个总称&#xff0c;用于解决由各位程序员自己基于 if-else 等规则开发算法而导致成本过高的问题&#xff0c;想要通过帮助机器 「发现」 它们 「自己」 解决问题的算法来解决 &#xff0c;而不需要程序员将所有…...

编程日记 2023/11/24 12:34:10

电子桌牌如何赋能数字化会务？以深圳程序员节为例。

10月24日&#xff0c;由深圳市人民政府指导&#xff0c;深圳市工业和信息化局、龙华区人民政府、国家工业信息安全发展研究中心、中国软件行业协会联合主办的2023深圳中国1024程序员节开幕式暨主论坛活动在深圳龙华区启幕。以“领航鹏城发展&#xff0c;码动程序世界”为主题&a…...

编程日记 2023/11/24 12:33:09

打包和部署Java应用程序：Maven和Shell脚本的实用方法

在软件开发领域&#xff0c;高效打包和分发Java应用程序是至关重要的。本博客将探讨一种使用Maven插件和Shell脚本的简化方法&#xff0c;以创建一个分发包&#xff0c;其中包含了您项目的可执行JAR文件、配置文件和一个方便的启动脚本。 步骤1&#xff1a;Maven插件配置 旅程…...

编程日记 2023/11/24 12:32:08

为什么你的技术文档总是缺乏专业感？这个编程语言图标库能改变一切

为什么你的技术文档总是缺乏专业感&#xff1f;这个编程语言图标库能改变一切 【免费下载链接】programming-languages-logos Programming Languages Logos 项目地址: https://gitcode.com/gh_mirrors/pr/programming-languages-logos 在技术内容创作中&#xff0c;开发…...

编程新知 2026/4/26 14:01:32

蓝桥杯单片机备赛：用AT24C02实现断电数据保存，告别每次上电都清零

蓝桥杯单片机备赛实战&#xff1a;基于AT24C02的断电数据保存系统设计 在蓝桥杯单片机竞赛中&#xff0c;数据持久化存储一直是困扰参赛选手的典型问题。想象这样一个场景&#xff1a;你精心设计的电子秤累计功能&#xff0c;每次断电后所有数据归零&#xff1b;或是温控系统的…...

编程新知 2026/4/26 13:51:28

AI 术语通俗词典：曼哈顿距离

曼哈顿距离是数学、数据分析、机器学习和人工智能中非常常见的一个术语。它用来描述两个点之间沿着各个坐标轴方向分别移动时&#xff0c;总共需要走多远。换句话说&#xff0c;曼哈顿距离是在回答&#xff1a;如果不能走斜线&#xff0c;只能沿着横向和纵向一段一段地走&#…...

编程新知 2026/4/26 11:44:48

从恒温烙铁到智能马桶：拆解身边那些用热敏电阻“感知”温度的小玩意儿

从恒温烙铁到智能马桶&#xff1a;拆解身边那些用热敏电阻“感知”温度的小玩意儿 你有没有想过&#xff0c;为什么电烙铁能精准保持340℃不烫坏电路板&#xff1f;为什么咖啡机能在92℃时自动停止加热&#xff1f;这些看似简单的温度控制背后&#xff0c;都藏着一个不起眼却至…...

编程新知 2026/4/26 11:07:59

Steam成就管理器：如何高效掌控你的游戏成就体验？

Steam成就管理器&#xff1a;如何高效掌控你的游戏成就体验&#xff1f; 【免费下载链接】SteamAchievementManager A manager for game achievements in Steam. 项目地址: https://gitcode.com/gh_mirrors/st/SteamAchievementManager 对于Steam平台的资深玩家来说&…...

编程新知 2026/4/26 9:52:44

终极指南：5步轻松实现DirectInput到XInput游戏控制器转换

终极指南&#xff1a;5步轻松实现DirectInput到XInput游戏控制器转换 【免费下载链接】XOutput DirectInput to XInput wrapper 项目地址: https://gitcode.com/gh_mirrors/xo/XOutput XOutput是一款功能强大的开源工具&#xff0c;专门解决老旧DirectInput游戏控制器在…...

编程新知 2026/4/26 9:26:12

如何免费在Windows、Linux和macOS上查看Outlook MSG邮件文件

如何免费在Windows、Linux和macOS上查看Outlook MSG邮件文件 【免费下载链接】MsgViewer MsgViewer is email-viewer utility for .msg e-mail messages, implemented in pure Java. MsgViewer works on Windows/Linux/Mac Platforms. Also provides a java api to read mail m…...

编程新知 2026/4/26 8:51:32

数据科学中的异常值检测：经典方法与实战解析

1. 数据科学中的异常值检测&#xff1a;经典方法解析在数据科学项目中&#xff0c;异常值就像聚会中那些不按常理出牌的客人——它们可能带来惊喜&#xff0c;也可能引发混乱。作为从业十余年的数据分析师&#xff0c;我见过太多项目因为忽视异常值处理而功亏一篑。今天我们就来…...

编程新知 2026/4/26 8:49:32

智能体评估与传统语言模型评估的四大核心差异

1. 为什么智能体评估与传统语言模型评估截然不同评估一个能够自主决策、调用工具并完成多步骤任务的AI智能体&#xff0c;与评估一个仅生成文本的语言模型&#xff0c;完全是两回事。就像测试一台计算器的显示屏和测试整个银行系统的区别——前者只关心输出内容是否清晰&#x…...

编程新知 2026/4/26 8:43:31

Ollama实战：Qwen2.5-VL-7B-Instruct部署全流程，图片分析、视频理解轻松体验

Ollama实战&#xff1a;Qwen2.5-VL-7B-Instruct部署全流程&#xff0c;图片分析、视频理解轻松体验 1. 引言&#xff1a;为什么你需要一个能“看懂”世界的AI助手&#xff1f; 想象一下&#xff0c;你有一张复杂的图表&#xff0c;需要快速提取关键数据&#xff1b;或者你有一…...

编程新知 2026/4/26 8:35:23