CSS特效---百分比加载特效

1、演示

2、一切尽在代码中

<!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>*,*:before,*:after {box-sizing: border-box;outline: none;}body {background: #57c3ea;font: 14px/1 'Open Sans', helvetica, sans-serif;-webkit-font-smoothing: antialiased;}.box {height: 280px;width: 280px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background: #a0a0a0;border-radius: 100%;overflow: hidden;}.box .percent {position: absolute;left: 0;top: 0;z-index: 3;width: 100%;height: 100%;display: flex;display: -webkit-flex;align-items: center;justify-content: center;color: #fff;font-size: 64px;}.box .water {position: absolute;left: 0;top: 0;z-index: 2;width: 100%;height: 100%;-webkit-transform: translate(0, 100%);transform: translate(0, 100%);background: #266fff;transition: all 0.3s;}.box .water_wave {width: 200%;position: absolute;bottom: 100%;}.box .water_wave_back {right: 0;fill: #c7eeff;-webkit-animation: wave-back 1.4s infinite linear;animation: wave-back 1.4s infinite linear;}.box .water_wave_front {left: 0;fill: #266fff;margin-bottom: -1px;-webkit-animation: wave-front 0.7s infinite linear;animation: wave-front 0.7s infinite linear;}@-webkit-keyframes wave-front {100% {-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}}@keyframes wave-front {100% {-webkit-transform: translate(-50%, 0);transform: translate(-50%, 0);}}@-webkit-keyframes wave-back {100% {-webkit-transform: translate(50%, 0);transform: translate(50%, 0);}}@keyframes wave-back {100% {-webkit-transform: translate(50%, 0);transform: translate(50%, 0);}}</style></head><body><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" style="display: none"><symbol id="wave"><pathd="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z"></path><pathd="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z"></path><pathd="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z"></path><pathd="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z"></path></symbol></svg><div class="box"><div class="percent"><div class="percentNum" id="count">0</div><div class="percentB">%</div></div><div id="water" class="water"><svg viewBox="0 0 560 20" class="water_wave water_wave_back"><use xlink:href="#wave"></use></svg><svg viewBox="0 0 560 20" class="water_wave water_wave_front"><use xlink:href="#wave"></use></svg></div></div><script>var cnt = document.getElementById('count')var water = document.getElementById('water')var percent = cnt.innerTextvar intervalinterval = setInterval(function () {percent++cnt.innerHTML = percentwater.style.transform = 'translate(0' + ',' + (100 - percent) + '%)'if (percent == 100) {clearInterval(interval)}}, 60)</script></body>
</html>

 

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

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

相关文章

公众号文章如何添加多个附件?

在公众号分享一些文档给粉丝下载&#xff0c;有那么几种方式。比如把文档转成超链接&#xff0c;放在公众号的“阅读原文”处&#xff0c;或者把文件转成二维码&#xff0c;贴在公众号文章里面。这两种方式其实都需要先把文件转成超链接&#xff08;网页链接&#xff09;&#…

【目标检测数据集】VOC2007 数据集介绍

一、介绍 VOC 数据是 PASCAL VOC Challenge 用到的数据集&#xff0c;官网&#xff1a;http://host.robots.ox.ac.uk/pascal/VOC/ 备注&#xff1a;VOC数据集常用的均值为&#xff1a;mean_RGB(122.67891434, 116.66876762, 104.00698793) Pytorch 上通用的数据集的归一化指…

OVITO-2.9版本

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…

系统架构最佳实践 -- 一般优惠券平台系统架构设计

优惠券是商城的一种基础的营销工具&#xff0c;在目前c端用户对于电子优惠券已经非常熟悉的情况下&#xff0c;一般自营商城的营销活动系统&#xff0c;都是从优惠券开始搭建。 一、名词定义 基于个人理解&#xff0c;为方便表述&#xff0c;首先对可能产生歧义的名词进行如下…

ubuntu 设置 root 用户密码,创建新用户并赋权限

ubuntu 设置 root 用户密码&#xff0c;创建新用户并赋权限 在适用于 Linux 的 Windows 子系统上运行 Linux GUI 应用&#xff0c; 安装 Ubuntu-20.04 系统&#xff0c;新安装好的系统&#xff0c;设置用户名密码时&#xff0c; root 用户密码默认为空&#xff0c;这时需要设置…

信息学奥赛一本通T1442-小木棍【dfs】

信息学奥赛一本通T1442-小木棍 - C语言网 (dotcpp.com) #include <iostream> #include <algorithm> #include <cmath> #include <cstring> using namespace std; const int N1e5100; int n; int res1e9; int a[N],p0,sd0; bool vis[N]; bool dfs(int i…

【R语言】绘制标准地图(指北针,比例尺,图例)

在绘制地图时&#xff0c;我们一般都是利用“ArcGIS”"MapGIS"等专业软件进行手动操作。这样制作的地图自定义的效果强&#xff0c;我们可以随意调换地图的各种元素&#xff0c;但是今天本文要将的是如何使用R语言绘制具备地图三要素的精美地图&#xff0c;当然代码绘…

Android 14.0 SystemUI修改状态栏电池图标样式为横屏显示

1.概述 在14.0的系统rom产品定制化开发中,对于原生系统中SystemUId 状态栏的电池图标是竖着显示的,一般手机的电池图标都是横屏显示的 可以觉得样式挺不错的,所以由于产品开发要求电池图标横着显示和手机的样式一样,所以就得重新更换SystemUI状态栏的电池样式了 如图: 2.S…

volatile是如何禁止指令进行重排序的

Further Reading &#xff1a; 内存屏障类型介绍&#xff08;StoreStore&#xff0c;StoreLoad&#xff0c;LoadLoad&#xff0c;LoadStore&#xff09; Further Reading &#xff1a; 什么是指令重排 重排序分为编译器重排序和处理器重排序。 为了实现volatile内存语义&#x…

【计算机毕业设计】人事管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

70 个常用的GIS Python 库

由于其多功能性、广泛的库生态系统和用户友好的语法&#xff0c;Python 已成为地理信息系统 (GIS) 和遥感领域的主导语言。这个 70 个地理空间 Python 库的汇编展示了可用于 GIS 和遥感数据处理和分析的丰富工具包。 Python 在 GIS 中的重要性源于它处理复杂地理空间数据的能力…

HTML快速入门

目录 一、HTML基础 1、HTML是什么&#xff1f; 2、认识 HTML 标签 3、HTML文件的基本结构 二、HTML快速开发 三、HTML常见标签 1、标题标签&#xff1a;h1~h6 2、段落标签&#xff1a;p 3、换行标签&#xff1a;br 4、图片标签&#xff1a;img 5、超链接&#xff1a…

Python单元测试框架—pytest常用测试报告类型

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 先前博客有介绍pytest测试框架的安装及使用&#xff0c;现在来聊…

Python赋能AI数据分析开启人工智能新时代

文章目录 一、Python是办公自动化的重要工具二、Python是提升职场竞争力的利器三、Python是企业数字化的重要平台四、Python是AI发展的重要通道之一《编程菜鸟学Python数据分析》编辑推荐内容简介作者简介目录前言为什么要写这本书读者对象如何阅读本书 随着我国企业数字化和信…

运动听歌哪款耳机靠谱?精选五款热门开放式耳机

随着人们对运动健康的重视&#xff0c;越来越多的运动爱好者开始关注如何在运动中享受音乐。开放式蓝牙耳机凭借其独特的设计&#xff0c;成为了户外运动的理想选择。它不仅让你在运动时能够清晰听到周围环境的声音&#xff0c;保持警觉&#xff0c;还能让你在需要时与他人轻松…

CentOS 7开机启动过程,引导和服务,密码的修改

开机启动过程&#xff1a; 引导过程&#xff1a;1.开机自检(BIOS)->2.MBR引导->GRUB菜单->加载内核kernel->systemd进程初始化 程序&#xff1a;执行特定任务的一串代码&#xff0c;静态&#xff0c;存在硬盘中。 进程&#xff1a;运行中的程序叫进程&#xff0…

Django之rest_framework(一)

一、请求和响应对象介绍 REST framework引入了2个新的对象:Request和Response 1.1、Request rest_framework.request.Request 该对象扩展了常规的HttpRequest ,增加了对REST框架灵活的请求解析和请求认证的支持 官网:Requests - Django REST framework 主要属性: data 这…

Oracle 数据库全表扫描的4种优化方法(DB)

全表扫描的工作是扫描高水位一下所有的数据块。 这里就有一个问题&#xff0c;什么是高水位线。高水位的标志存在表头。 该数据块以后都是崭新未格式化的数据块&#xff0c;高水位的目的有二。它是全表扫描的 终点&#xff0c;并行插入的起点&#xff01; 优化全表扫描的办法有…

类和对象(拷贝构造函数)

目录 拷贝构造函数 特征 结论&#xff1a; 拷贝构造函数 拷贝构造函数&#xff1a;只有单个形参&#xff0c;该形参是对本类类型对象的引用(一般常用const修饰)&#xff0c;在用已存 在的类类型对象创建新对象时由编译器自动调用。 特征 拷贝构造函数也是特殊的成员函数&…

AD7685BRMZRL7 16位 2.3V 低功耗模数转换器芯片 ADI

AD7685BRMZRL7是一款由ADI&#xff08;亚德诺&#xff09;公司生产的模数转换器&#xff08;ADC&#xff09;芯片。该芯片的主要功能是将模拟信号转换为数字信号&#xff0c;以便在数字系统中处理. AD7685BRMZRL7 规格信息&#xff1a; 制造商:Analog Devices Inc. 产品种类:模…