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

news/2024/5/28 4:07:49/文章来源:https://blog.csdn.net/nibabaoo/article/details/137672040

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.ldbm.cn/p/410821.html

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

相关文章

LibRadtran使用教程

LibRadtran使用教程 1.简介2.基本语法规则3.例子3.1 例子13.2 例子2 1.简介 关于LibRadtran的介绍以及安装可以参考另一篇博文&#xff1a;Windows系统LibRadtran安装。这里将针对LibRadtran的基础使用&#xff0c;以及基本语法进行介绍。 2.基本语法规则 uvspec < input…

功能测试_订购单检查_判定表

画判定表的步骤&#xff1a; 列出条件 列出动作

2024年认证杯数学建模挑战赛C题全解析

2024年认证杯C题的已经完成啦&#xff0c;包括参考论文&#xff0c;模型代码&#xff0c;分享给大家&#xff5e; 问题分析 对于这些问题&#xff0c;我们首先需要确定影响日光辐射降低效应的关键参数&#xff0c;例如海盐气溶胶的浓度、粒子大小、分布以及喷洒高度和范围。同…

Qt发布可执行exe

文章目录 方法步骤1&#xff1a;在release下编译程序。步骤2&#xff1a;windous R 输入CMD步骤3&#xff1a;切换到你的release目录下。步骤4&#xff1a;打开cmd运行windeployqt xx.exe Qt错误&#xff1a;windeployqt 不是内部或外部命令&#xff0c;也不是可运行的程序 或批…

Java基础第十一课——类与对象(2)

由于类与对象这一部分的知识点很多&#xff0c;而且操作方法也有很多&#xff0c;所以这次将继续深入讨论一下关于类与对象中方法传参、方法重载、构造方法以及this关键字使用方面的知识。 一、方法传参 1.return关键字 return关键字作用 作用场景&#xff1a;方法内 作用…

Taro打包生成不同目录

使用taro init创建taro项目时&#xff0c;taro默认打包目录是&#xff1a; /config/index.js outputRoot:dist默认的目录&#xff0c;编译不同平台代码时就会覆盖掉&#xff0c;为了达到多端同步调试的目的&#xff0c;这时需要修改默认生成目录了&#xff0c;通过查看官方文…

【前端面试3+1】12 toktn验证过程、面向对象特性、webpack和vite的区别、【字符串中的第一个唯一字符】

一、token验证过程 用户登录&#xff1a;用户提供用户名和密码进行登录。服务器验证&#xff1a;服务器接收到用户提供的用户名和密码&#xff0c;进行验证。生成token&#xff1a;如果用户名和密码验证通过&#xff0c;服务器会生成一个token&#xff0c;通常包含一些加密的信…

力扣刷题 二叉树层序遍历相关题目II

NO.116 填充每个节点的下一个右侧节点指针 给定一个 完美二叉树 &#xff0c;其所有叶子节点都在同一层&#xff0c;每个父节点都有两个子节点。二叉树定义如下&#xff1a; struct Node {int val;Node *left;Node *right;Node *next; } 填充它的每个 next 指针&#xff0c;…

IP地址定位技术在各领域的作用

IP地址定位是通过确定IP地址的物理位置来定位一个设备的技术&#xff0c;它在现代社会的多个领域中都有着广泛的应用。以下将详细探讨IP地址定位的应用场景&#xff0c;以期对读者有所启发。 首先&#xff0c;在网络安全领域&#xff0c;IP地址定位发挥着至关重要的作用。网络…

Golang 开发实战day08 - Multiple Return values

&#x1f3c6;个人专栏 &#x1f93a; leetcode &#x1f9d7; Leetcode Prime &#x1f3c7; Golang20天教程 &#x1f6b4;‍♂️ Java问题收集园地 &#x1f334; 成长感悟 欢迎大家观看&#xff0c;不执着于追求顶峰&#xff0c;只享受探索过程 Golang 教程08 - Multiple R…

位像素海外仓管理系统对接ERP系统教程,一对一教学

在海外仓管理过程中&#xff0c;对接ERP系统的重要性不言而喻的。这种对接不仅能让数据实时共享&#xff0c;还能让海外仓管理者优化整个供应链管理流程。 因此&#xff0c;今天小编就来教大家&#xff0c;海外仓仓库系统是怎么对接ERP物流系统的&#xff1f; 1.分析需求 在对接…

计算机视觉——图像特征提取D2D先描述后检测特征提取算法原理

概述 局部特征提取是计算机视觉中的一个重要任务&#xff0c;它旨在从图像中提取出能够代表图像局部结构和外观信息的特征。这些特征通常用于图像匹配、物体识别、三维重建、跟踪和许多其他应用。传统方法&#xff0c;如尺度不变特征变换&#xff08;SIFT&#xff09;&#xf…

【刷题篇】回溯算法(三)

文章目录 1、全排列2、子集3、找出所有子集的异或总和再求和4、全排列 II5、电话号码的字母组合6、括号生成 1、全排列 给定一个不含重复数字的数组 nums &#xff0c;返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 class Solution { public:vector<vector<i…

Android适配平板屏幕尺寸

一、划分手机和平板 人为判断方法: 大于6英寸的就是平板。小于6英寸的都是手机 平板尺寸&#xff1a; 6英寸、7英寸、10英寸、14英寸… Android系统支持多配置资源文件&#xff0c;我们可以追加新的资源目录到你的Android项目中。命名规范&#xff1a; 资源名字-限制符 l…

《HF经理》:一、管理误区

1、不善授权: 原因&#xff1a;不信任下属&#xff0c;惯性思维&#xff08;任务一来自己冲到最前面&#xff09; 对策&#xff1a;从个人成功到带领团队成功。培养并信任下属。 2、不主动寻求上级支持: 原因&#xff1a;上级不仅仅是你的监督和考核者&#xff0c;还是你的支…

使用 Docker 部署 Open-Resume 在线简历平台

1&#xff09;Open-Resume 介绍 GitHub&#xff1a; https://github.com/xitanggg/open-resume Open-Resume 是一款功能强大的开源 简历生成器 和 简历解析器 。可以帮助我们快速的生成个人简历&#xff0c;并定制化不同的主题和布局风格。该项目的目标是为每个人提供免费的现…

【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬浮按钮弹出对话框

往期回顾&#xff1a; 【QT入门】 Qt自定义控件与样式设计之qss选择器-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QLineEdit的qss使用-CSDN博客 【QT入门】Qt自定义控件与样式设计之QPushButton常用qss-CSDN博客 【QT入门】 Qt自定义控件与样式设计之QPushButton实现鼠标悬…

飞书api增加权限

1&#xff0c;进入飞书开发者后台&#xff1a;飞书开放平台 给应用增加权限 2&#xff0c;进入飞书管理后台 https://fw5slkpbyb3.feishu.cn/admin/appCenter/audit 审核最新发布的版本 如果还是不行&#xff0c;则需要修改数据权限&#xff0c;修改为全部成员可修改。 改完…

【刷题】备战蓝桥杯 — dfs 算法

送给大家一句话&#xff1a; 风度真美&#xff01; 即使流泪&#xff0c;也要鼓掌&#xff0c; 即使失望&#xff0c;也要满怀希望。 ——刘宝增 dfs 算法 1 前言2 洛谷 P1030 [NOIP2001 普及组] 求先序排列题目描述算法思路 3 洛谷 P1294 高手去散步题目描述算法思路 4 蓝桥…

天地人和•大道不孤——卢禹舜中国画作品展在重庆美术馆隆重开幕

2024年4月12日&#xff0c;由中国国家画院、重庆市文化和旅游发展委员会主办&#xff0c;重庆美术馆&#xff08;重庆画院、重庆国画院&#xff09;、北京八荒锦绣美术馆、中国国际文化交流基金会卢禹舜艺术基金承办的“天地人和•大道不孤——卢禹舜中国画作品展”开幕式在重庆…