前端 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.打开问…

5.28 学习总结

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

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;一个斐波那契数字是由该数列相邻的前两个数字相加得到的 在斐波那契交易…

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

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

14.Redis之JAVASpring客户端

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

洛谷 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;欢迎关注。提供嵌入式方向…

民国漫画杂志《时代漫画》第29期.PDF

时代漫画29.PDF: https://url03.ctfile.com/f/1779803-1248635405-bf3c87?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了&#xff0c;截止1937年6月战争来临被迫停刊共发行了39期。 ps: 资源来源网络!

代码文本编辑器-小白教程(Sublime text, Notepad++ Acode下载安装与使用)

代码文本编辑器-小白教程&#xff08;Sublime text, Notepad Acode下载安装与使用&#xff09; 1. Windows平台和Linux平台1.1 Sublime text1.2 Notepad 2. 安卓平台 Acode参考资料 1. Windows平台和Linux平台 1.1 Sublime text 一、安装教程 1、打开Sublime Text官网下载安…

如何使用 Connector API 将数据提取到 Elasticsearch Serverless 中

作者&#xff1a;来自 Elastic Jedr Blaszyk Elasticsearch 支持一系列摄取方法。 其中之一是 Elastic Connectors&#xff0c;它将 SQL 数据库或 SharePoint Online 等外部数据源与 Elasticsearch 索引同步。 连接器对于在现有数据之上构建强大的搜索体验特别有用。 例如&…

现代信号处理11_Spectral Analysis谱分析(CSDN_20240526)

谱分析与傅里叶变换 对于一个信号&#xff0c;一方面可以从时域上对其进行分析&#xff0c;另一方面也可以从频域上对其进行认识&#xff0c;对信号进行频谱分析能够帮助我们了解能量在频域上的分布。 确定性信号的能量通常是有限的&#xff0c;而平稳随机信号的能量通常是无限…

ChatGPT自然科学应用,R语言lavaan结构方程模型、copula函数

R语言lavaan结构方程模型&#xff08;SEM&#xff09; 结构方程模型&#xff08;Sructural Equation Modeling&#xff0c;SEM&#xff09;是分析系统内变量间的相互关系的利器&#xff0c;可通过图形化方式清晰展示系统中多变量因果关系网&#xff0c;具有强大的数据分析功能和…