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

前端 CSS 经典：水波进度样式

news 2025/12/16 16:27:11

前言：简单实现水波进度样式，简单好看。

效果图：

代码实现：

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><metaname="viewport"content="initial-scale=1.0, user-scalable=no, width=device-width"/><title>document</title><style>body {background: #000;}.indicator {display: flex;align-items: center;justify-content: center;font-size: 3em;margin: 200px auto;width: 100px;height: 100px;border-radius: 50%;border: 2px solid #fff;position: relative;overflow: hidden;color: #fff;}.indicator span {position: absolute;z-index: 999;}.indicator::after {content: "";width: 200px;height: 200px;border-radius: 60px;position: absolute;left: -50%;top: 50px;background: blue;animation: rotate 5s linear 0s infinite;}@keyframes rotate {from {transform: rotateZ(0deg);}to {transform: rotateZ(359deg);}}</style></head><body><div><div class="indicator"><span>50</span></div></div><script></script></body>
</html>

相关文章：

前端 CSS 经典：水波进度样式

前言&#xff1a;简单实现水波进度样式&#xff0c;简单好看。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" cont…...

编程日记 2024/6/8 10:58:47

深入解析CSS中的块级元素

块级元素在CSS中是一种常见的元素类型&#xff0c;具有一些特定的表现和行为特征。了解块级元素的定义和特点对于掌握CSS布局和样式设计至关重要。本文将从多个角度深入解析CSS中的块级元素&#xff0c;探讨其含义、特点以及在页面布局中的应用。 什么是块级元素&#xff1f; …...

编程日记 2024/6/8 10:56:45

PDF裁剪网站

裁剪 PDF – 修剪 PDF 文件中不需要的空白...

编程日记 2024/6/8 10:54:43

数据结构复习指导之外部排序

目录 外部排序 复习提示 1.外部排序的基本概念 2.外部排序的方法 2.1对大文件排序时使用的排序算法&#xff08;2016&#xff09; 3.多路平衡归并与败者树 4.置换-选择排序&#xff08;生成初始归并段&#xff09; 4.1置换-选择排序生成初始归并段的实例(2023) 5.最佳…...

编程日记 2024/6/8 10:51:41

【Python报错】已解决TypeError: can only concatenate str (not “int“) to str

解决Python报错&#xff1a;TypeError: can only concatenate str (not “int”) to str 在Python中&#xff0c;字符串连接是常见的操作&#xff0c;但如果你尝试将整数&#xff08;int&#xff09;与字符串&#xff08;str&#xff09;直接连接&#xff0c;会遇到TypeError: …...

编程日记 2024/6/8 10:48:38

Log4j日志级别介绍

Log4j 是一个广泛使用的 Java 日志记录框架&#xff0c;提供了多种日志级别&#xff0c;用于控制日志输出的详细程度。每个日志级别代表一种特定的重要性和紧急程度。 以下是 Log4j 的常见日志级别及其解读&#xff1a; FATAL&#xff08;致命&#xff09; 解释&#xff1a;表…...

编程日记 2024/6/8 10:47:37

[MQTT]服务器EMQX搭建SSL/TLS连接过程（wss://)

&#x1f449;原文阅读 &#x1f4a1;章前提示 本文采用8084端口进行连接&#xff0c;是EMQX 默认提供了四个常用的监听器之一&#xff0c;如果需要添加其他类型的监听器&#xff0c;可参考官方文档&#x1f517;管理 | EMQX 文档。 本文使用自签名CA&#xff0c;需要提前在L…...

编程日记 2024/6/8 10:46:36

【纯血鸿蒙】——响应式布局如何实现？

前面介绍了自适应布局&#xff0c;但是将窗口尺寸变化较大时&#xff0c;仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题。此时就需要借助响应式布局能力调整页面结构。 响应式布局 响应式布局是指页面内的元素可以根据特定的特征&#xff08;如窗口…...

编程日记 2024/6/8 10:44:34

深入理解Django Serializer及其在Go语言中的实现20240604

深入理解Django Serializer及其在Go语言中的实现 在现代Web开发中&#xff0c;前后端分离已成为主流架构模式。作为开发者&#xff0c;我们经常需要处理数据的序列化和反序列化&#xff0c;以便在前后端之间传递数据。在Django中&#xff0c;Serializer是一个强大的工具&#…...

编程日记 2024/6/8 10:43:33

电子纸在日化行业的全新应用

电子纸在日化行业的全新应用 项目背景 在一日化龙头企业他们的洗衣粉产线在AGV小车取料到运输到产品包装工序时&#xff0c;因为取料粉车无明显区分标识&#xff0c;但是产品系列有十大类。在未采用晨控电子纸之前现场采用一个转盘分为十个区域&#xff0c;取料工序上方会有一…...

编程日记 2024/6/8 10:39:29

【Redis】Redis的双写问题

在分布式系统中&#xff0c;双写问题通常是指数据在多个存储系统&#xff08;例如数据库和缓存&#xff09;中更新时出现的不一致性。这种问题在使用 Redis 作为缓存层时尤为常见。具体来说&#xff0c;当数据在数据库和 Redis 缓存中存在副本时&#xff0c;任何对数据的更新操…...

编程日记 2024/6/8 10:38:28

生气时，你的“心”会发生什么变化？孟德尔随机化分析猛如虎，结果都是套路...

“不生气不生气&#xff0c;气出病来无人替”&#xff0c;不少人遇事常这样宽慰自己。事实上&#xff0c;“气死”真不是危言耸听。越来越多的研究证明了情绪稳定对健康的重要性&#xff0c;那么&#xff0c;当情绪频繁波动时&#xff0c;我们的心血管究竟会发生什么变化&#…...

编程日记 2024/6/8 10:37:27

页面加载性能分析时，有哪些常见的性能瓶颈需要特别注意？

在进行页面加载性能分析时&#xff0c;以下是一些常见的性能瓶颈&#xff0c;需要特别注意&#xff1a; 长页面加载时间&#xff1a; 页面加载时间超过行业标准或用户期望&#xff0c;导致用户流失。 高 CPU 使用率&#xff1a; 某些脚本或操作导致 CPU 使用率飙升&#xff0c;…...

编程日记 2024/6/8 10:35:26

Scanner

Java 有一个 Scanner 类&#xff0c;用这个类可以接受键盘输入。 步骤&#xff1a; 导入该类所在的包&#xff08;要使用一个类的话就必须先导入该类所在的包&#xff09;创建该类的对象调用里面的功能 Scanner 有两套系统。 第一套系统&#xff1a; nextInt(); nextDoubl…...

编程日记 2024/6/8 10:34:25

vue3实现录音与录像上传功能

录音 <script setup lang"ts"> import { onMounted, reactive, ref } from vue; import useInject from /utils/useInject;const props: any defineProps<{params?: any; }>();const recObj: any reactive({blob: null, });const { $global, $fn } …...

编程日记 2024/6/8 10:31:22

PHP小方法

一、随机生成姓名 二、随机获取身份证 三、随机获取手机号 四、随机获取省 五、通过身份证获取生日和性别 六、通过身份证获取年龄 七、获取访问IP 八、获取访问URL地址 九、陆续增加 //一、随机生成姓名 function generateName(){$arrXing getXingList();$numbXing …...

编程日记 2024/6/8 10:29:21

gulimall-search P125 springboot整合elasticsearch版本冲突

一、问题 spring-boot.version 2.2.4.RELEASE,在gulimall-search pom.xml中添加elasticsearch.version 7.4.2后&#xff0c;发现出现如下问题&#xff1a;elasticsearch版本是springboot引入的6.8.6&#xff0c;没有变为7.4.2。 二、原因 在gulimall-search 的pom文件中&#…...

编程日记 2024/6/8 10:28:20

如何在Coze中实现Bot对工作流的精准调用（如何提高Coze工作流调用的准确性和成功率）

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 工作流（workflow）📒📝 创建设计工作流📝 添加工作流📝 调用工作流⚓️ 相关链接 ⚓️📖 介绍 📖 在使用Coze平台创建智能Bot时，您可能会遇到一个常见问题：即便添加了正确的工作流，Bot却没有按照预期调用它们。…...

编程日记 2024/6/8 10:27:19

毫米波雷达阵列天线设计综合1（MATLAB仿真）

1 天线设计目标 毫米波雷达探测目标的距离、速度和角度&#xff0c;其中距离和角度和天线设计相关性较强。天线增益越高&#xff0c;则根据雷达方程可知探测距离越远&#xff1b;天线波束越窄&#xff0c;则角度分辨率越高&#xff1b;天线副瓣/旁瓣越低&#xff0c;则干扰越少…...

编程日记 2024/6/8 10:26:18

Freemarker

Freemarker简介 Freemarker是一个用Java语言编写的模板引擎&#xff0c;用于基于模板和数据生成文本输出。它可以用于生成HTML网页、XML文档、电子邮件、配置文件等任何格式的文本。Freemarker将业务逻辑与表示逻辑分离&#xff0c;使得开发人员可以专注于功能实现&#xff0c…...

编程日记 2024/6/8 10:25:18

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/12/16 3:57:56

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/12/12 3:26:16

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

编程新知 2025/11/30 16:55:15

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/12/15 7:25:17

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/11/11 6:28:42

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

编程新知 2025/12/15 2:27:36

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/11/9 21:54:26