前端 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17824.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

git:Unable to negotiate问题解决

场景说明&#xff1a; 安装了Gitblit(自架的代码仓库服务)发现部分电脑无法推代码&#xff0c;报错误如下&#xff1a; Unable to negotiate with **** port 22: no matching host key type found. Their offer: ssh-rsa 并排队了账户权限问题。 解决方案&#xff1a; 1.打开问…

计算机原理 知识回顾

第一部分&#xff1a;计算机基础概念 计算机的定义 计算机的演化历程计算机的分类&#xff08;超级计算机、桌面计算机、便携式计算机等&#xff09; 计算机的基本组成 输入设备、输出设备中央处理单元&#xff08;CPU&#xff09;、存储器、主板 计算机的工作原理 数据输…

5.28 学习总结

一.CSS学习(一) 一、CSS简介 1、什么是CSS CSS&#xff1a;Cascading Style Sheet 层叠样式表是一组样式设置的规则&#xff0c;用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离&#xff0c;便于团队开发样式复用&#xff0c;便于网站的后期维护页面的精确…

uniapp sqlite数据库插件

uniapp 原生sqlite本地数据库管理 Ba-Sqlite_sqlite_三杯五岳-华为云开发者联盟

iptables练习题

目录 练习题1. 显示当前的iptables规则2. 允许所有来自192.168.1.0/24的TCP流量到本机的22端口&#xff08;SSH&#xff09;3. 禁止所有来自10.0.0.0/8的ICMP流量4. 允许所有出站流量5. 拒绝所有来自外部的HTTP流量&#xff08;80端口&#xff0c;tcp协议&#xff09;6. 删除IN…

数据恢复与取证软件: WinHex 与 X-Ways Forensics 不同许可证功能区别

天津鸿萌科贸发展有限公司从事数据安全业务20余年&#xff0c;在数据恢复、数据取证、数据备份等领域有丰富的案例经验、专业技术及良好的行业口碑。同时&#xff0c;公司面向取证机构及数据恢复公司&#xff0c;提供数据恢复实验室建设方案&#xff0c;包含数据恢复硬件设备及…

期货学习笔记-斐波那契学习1

斐波那契数列介绍 斐波那契数列是1、1、2、3、5、8、13、21、34、55、89…据说这是数学家莱昂纳多 斐波那契研究兔子繁殖时发现的一个神奇数列&#xff0c;似乎大自然在按照这个数列进行演化&#xff0c;一个斐波那契数字是由该数列相邻的前两个数字相加得到的 在斐波那契交易…

oracle 核心进程

DBWn&#xff08;Database Writer&#xff09;&#xff1a;负责将数据库缓冲区中的数据写回磁盘&#xff0c;以保证数据的持久性。 LGWR&#xff08;Log Writer&#xff09;&#xff1a;负责将日志缓冲区中的日志写入到磁盘上的在线重做日志文件&#xff0c;用于数据库的恢复和…

基于STM32实现智能交通灯控制系统

目录 引言环境准备智能交通灯控制系统基础代码示例&#xff1a;实现智能交通灯控制系统 GPIO控制交通灯定时器配置与使用红外传感器检测车辆用户界面与显示应用场景&#xff1a;城市交通管理与自动化控制问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌…

【chatGPT API】Function Calling:将自然语言转换为API调用或数据库查询

文章目录 一. 介绍二. 常见用例与Function Calling调用逻辑三. 调用细节1. 调用行为&#xff1a;tool_choice2. 调用规定&#xff1a;functions 四. 实战&#xff1a;查询公司相关产品 一. 介绍 OpenAI可以根据用户的要求输出一个符合用户要求的入参值。然后用户拿到入参值之后…

14.Redis之JAVASpring客户端

1.引入依赖 此时就会引入操作 redis 的依赖了~~ 2.yml配置 spring:redis:host: 127.0.0.1port: 8888 3.准备 前面使用 jedis,是通过 Jedis 对象里的各种方法来操作 redis 的.此处Spring 中则是通过 StringRedisTemplate 来操作 redis .最原始提供的类是 RedisTemplateStrin…

LeetCode 每日一题 数学篇(2769.找出最大的可达成数字)

给你两个整数 num 和 t 。 如果整数 x 可以在执行下述操作不超过 t 次的情况下变为与 num 相等&#xff0c;则称其为 可达成数字 &#xff1a; 每次操作将 x 的值增加或减少 1 &#xff0c;同时可以选择将 num 的值增加或减少 1 。 返回所有可达成数字中的最大值。可以证明至…

洛谷 P1346电车

题目来源于&#xff1a;洛谷 解题思路&#xff1a; 可以把一个路口看作一张图中的一个点&#xff0c;轨道是图中的边&#xff08;注意&#xff1a;这是有向图&#xff09;&#xff0c;每一条边的权值就是这个边所联通的点是否需要按按钮&#xff08;需要按按钮就是1&#xff0…

关于NLTK

一、NLTK简介 下图来自NLTK官网&#xff1a;https://www.nltk.org/index.html NLTK&#xff0c;全称为Natural Language Toolkit&#xff0c;是一个用于处理和分析自然语言文本的Python库。它提供了一系列丰富的工具和资源&#xff0c;包括词汇资源&#xff08;如WordNet&am…

蓝桥楼赛第30期-Python-第三天赛题 提取电影信息题解

楼赛 第30期 Python 模块大比拼 提取电影信息 介绍 JSON&#xff08;JavaScript Object Notation, /ˈdʒeɪsən/&#xff09;是一种轻量级的数据交换格式&#xff0c;最初是作为 JavaScript 的子集被发明的&#xff0c;但目前已独立于编程语言之外&#xff0c;成为了通用的…

常见开源蜜罐系统

蜜罐系统&#xff08;Honeypot&#xff09;在信息安全领域中是一种被广泛使用的技术&#xff0c;旨在吸引和诱导黑客入侵&#xff0c;从而获取和分析攻击者的行为和手段。以下是一些常见的蜜罐系统的介绍&#xff1a; HFish开源蜜罐系统 特点&#xff1a; 多功能&#xff1a;支…

Scrapy框架简单介绍及Scrapy项目编写详细步骤(Scrapy框架爬取豆瓣网站示例)

引言 Scrapy是一个用Python编写的开源、功能强大的网络爬虫框架&#xff0c;专为网页抓取和数据提取设计。它允许开发者高效地从网站上抓取所需的数据&#xff0c;并通过一系列可扩展和可配置的组件来处理这些数据。Scrapy框架的核心组成部分包括&#xff1a; Scrapy Engine&…

H4022 12V24V36V40V4A同步降压芯片 Buck-DCDC 高效率95%

H4022 40V4A同步降压芯片是一款Buck-DCDC转换器&#xff0c;其高效率、高稳定性。以下是对该产品的详细分析&#xff1a; 一、产品优势 高效率&#xff1a;H4022的转换效率高达95%&#xff0c;这主要得益于其同步降压技术。同步降压技术相较于传统的异步降压技术&#xff0c;能…

macOS上用Qt creator编译并跑shotcut

1 简介 Shotcut是一个开源的跨平台的视频编辑软件&#xff0c;支持WIN/MACOS/LINUX等平台&#xff0c;由于该项目的编译较为麻烦&#xff0c;踩坑几许&#xff0c;因此写此文章记录完整编译构建过程&#xff0c;后续按此法编译&#xff0c;可减少走弯路&#xff0c;提高生产力。…

【NumPy】全面解析NumPy的bitwise_xor函数:高效按位异或操作指南

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…