前端 CSS 经典：水波进度样式
前言：简单实现水波进度样式，简单好看。
效果图：
代码实现：
<!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 经典：水波进度样式
前言：简单实现水波进度样式，简单好看。 效果图： 代码实现： <!DOCTYPE html> <html lang"en"><head><meta charset"utf-8" /><meta http-equiv"X-UA-Compatible" cont…...
深入解析CSS中的块级元素
块级元素在CSS中是一种常见的元素类型，具有一些特定的表现和行为特征。了解块级元素的定义和特点对于掌握CSS布局和样式设计至关重要。本文将从多个角度深入解析CSS中的块级元素，探讨其含义、特点以及在页面布局中的应用。 什么是块级元素？ …...
PDF裁剪网站
裁剪 PDF – 修剪 PDF 文件中不需要的空白...
数据结构复习指导之外部排序
目录 外部排序 复习提示 1.外部排序的基本概念 2.外部排序的方法 2.1对大文件排序时使用的排序算法（2016） 3.多路平衡归并与败者树 4.置换-选择排序（生成初始归并段） 4.1置换-选择排序生成初始归并段的实例(2023) 5.最佳…...
【Python报错】已解决TypeError: can only concatenate str (not “int“) to str
解决Python报错：TypeError: can only concatenate str (not “int”) to str 在Python中，字符串连接是常见的操作，但如果你尝试将整数（int）与字符串（str）直接连接，会遇到TypeError: …...
Log4j日志级别介绍
Log4j 是一个广泛使用的 Java 日志记录框架，提供了多种日志级别，用于控制日志输出的详细程度。每个日志级别代表一种特定的重要性和紧急程度。 以下是 Log4j 的常见日志级别及其解读： FATAL（致命） 解释：表…...
[MQTT]服务器EMQX搭建SSL/TLS连接过程（wss://)
👉原文阅读 💡章前提示 本文采用8084端口进行连接，是EMQX 默认提供了四个常用的监听器之一，如果需要添加其他类型的监听器，可参考官方文档🔗管理 | EMQX 文档。 本文使用自签名CA，需要提前在L…...
【纯血鸿蒙】——响应式布局如何实现？
前面介绍了自适应布局，但是将窗口尺寸变化较大时，仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题。此时就需要借助响应式布局能力调整页面结构。 响应式布局 响应式布局是指页面内的元素可以根据特定的特征（如窗口…...
深入理解Django Serializer及其在Go语言中的实现20240604
深入理解Django Serializer及其在Go语言中的实现 在现代Web开发中，前后端分离已成为主流架构模式。作为开发者，我们经常需要处理数据的序列化和反序列化，以便在前后端之间传递数据。在Django中，Serializer是一个强大的工具&#…...
电子纸在日化行业的全新应用
电子纸在日化行业的全新应用 项目背景 在一日化龙头企业他们的洗衣粉产线在AGV小车取料到运输到产品包装工序时，因为取料粉车无明显区分标识，但是产品系列有十大类。在未采用晨控电子纸之前现场采用一个转盘分为十个区域，取料工序上方会有一…...
【Redis】Redis的双写问题
在分布式系统中，双写问题通常是指数据在多个存储系统（例如数据库和缓存）中更新时出现的不一致性。这种问题在使用 Redis 作为缓存层时尤为常见。具体来说，当数据在数据库和 Redis 缓存中存在副本时，任何对数据的更新操…...
生气时，你的“心”会发生什么变化？孟德尔随机化分析猛如虎，结果都是套路...
“不生气不生气，气出病来无人替”，不少人遇事常这样宽慰自己。事实上，“气死”真不是危言耸听。越来越多的研究证明了情绪稳定对健康的重要性，那么，当情绪频繁波动时，我们的心血管究竟会发生什么变化&#…...
页面加载性能分析时，有哪些常见的性能瓶颈需要特别注意？
在进行页面加载性能分析时，以下是一些常见的性能瓶颈，需要特别注意： 长页面加载时间： 页面加载时间超过行业标准或用户期望，导致用户流失。 高 CPU 使用率： 某些脚本或操作导致 CPU 使用率飙升，…...
Scanner
Java 有一个 Scanner 类，用这个类可以接受键盘输入。 步骤： 导入该类所在的包（要使用一个类的话就必须先导入该类所在的包）创建该类的对象调用里面的功能 Scanner 有两套系统。 第一套系统： nextInt(); nextDoubl…...
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 } …...
PHP小方法
一、随机生成姓名 二、随机获取身份证 三、随机获取手机号 四、随机获取省 五、通过身份证获取生日和性别 六、通过身份证获取年龄 七、获取访问IP 八、获取访问URL地址 九、陆续增加 //一、随机生成姓名 function generateName(){$arrXing getXingList();$numbXing …...
gulimall-search P125 springboot整合elasticsearch版本冲突
一、问题 spring-boot.version 2.2.4.RELEASE,在gulimall-search pom.xml中添加elasticsearch.version 7.4.2后，发现出现如下问题：elasticsearch版本是springboot引入的6.8.6，没有变为7.4.2。 二、原因 在gulimall-search 的pom文件中&#…...
如何在Coze中实现Bot对工作流的精准调用（如何提高Coze工作流调用的准确性和成功率）
文章目录 📖 介绍 📖🏡 演示环境 🏡📒 工作流（workflow）📒📝 创建设计工作流📝 添加工作流📝 调用工作流⚓️ 相关链接 ⚓️📖 介绍 📖 在使用Coze平台创建智能Bot时，您可能会遇到一个常见问题：即便添加了正确的工作流，Bot却没有按照预期调用它们。…...
毫米波雷达阵列天线设计综合1（MATLAB仿真）
1 天线设计目标 毫米波雷达探测目标的距离、速度和角度，其中距离和角度和天线设计相关性较强。天线增益越高，则根据雷达方程可知探测距离越远；天线波束越窄，则角度分辨率越高；天线副瓣/旁瓣越低，则干扰越少…...
Freemarker
Freemarker简介 Freemarker是一个用Java语言编写的模板引擎，用于基于模板和数据生成文本输出。它可以用于生成HTML网页、XML文档、电子邮件、配置文件等任何格式的文本。Freemarker将业务逻辑与表示逻辑分离，使得开发人员可以专注于功能实现，…...
线程同步：确保多线程程序的安全与高效！
全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
CRMEB 框架中 PHP 上传扩展开发：涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云
目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...
汇编常见指令
汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX（不访问内存）XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...
安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”（装配）
船舶制造装配管理现状：装配工作依赖人工经验，装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书，但在实际执行中，工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...
Java编程之桥接模式
定义 桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言： 在Java编程中，类的生命周期是指类从被加载到内存中开始，到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期，让读者对此有深刻印象。 目录 …...
PostgreSQL——环境搭建
一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在࿰…...
Sklearn 机器学习 缺失值处理 获取填充失值的统计值
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...