当前位置: 首页 > news >正文

【css酷炫效果】纯CSS实现进度条加载动画

【css酷炫效果】纯CSS实现进度条加载动画

  • 创作背景
  • html结构
  • css样式
  • 完整代码
    • 基础版
    • 进阶版
  • 效果图

通过CSS渐变与背景位移动画,无需JavaScript即可创建流体动态进度条
想直接拿走的老板,链接放在这里:https://download.csdn.net/download/u011561335/90490485

创作随缘,不定时更新。

创作背景

刚看到csdn出活动了,赶时间,直接上代码。

html结构

<div class="progress-bar"><div class="progress"></div>
</div>

css样式

.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 100%;animation: flow 2s linear infinite;transform-origin: left;/* transform: scaleX(0.7); 设置当前进度70% */
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}

完整代码

基础版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>

进阶版

<!DOCTYPE html>
<html>
<head>
<style>
.progress-bar {width: 300px;height: 20px;background: #eee;border-radius: 10px;overflow: hidden;
}.progress {width: 100%;height: 100%;background: linear-gradient(90deg, #3498db 25%, #9b59b6 50%, #e74c3c 75%);background-size: 200% 400%;animation: flow 2s linear infinite;transform-origin: left;background: repeating-linear-gradient(-45deg,#3498db,#3498db 10px,#2980b9 10px,#2980b9 20px);background-size: 200% 100%;box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);border-right: 3px solid rgba(255,255,255,0.3);transition: transform 0.3s ease-out;
}@keyframes flow {0% { background-position: 100% 0; }100% { background-position: 0% 0; }
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="progress-bar"><div class="progress"></div></div></div></body>
</html>

效果图

在这里插入图片描述
在这里插入图片描述

相关文章:

【css酷炫效果】纯CSS实现进度条加载动画

【css酷炫效果】纯CSS实现进度条加载动画 缘创作背景html结构css样式完整代码基础版进阶版 效果图 通过CSS渐变与背景位移动画&#xff0c;无需JavaScript即可创建流体动态进度条。 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u…...

【后端开发面试题】每日 3 题(十三)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;https://blog.csdn.net/newin2020/category_12903849.html &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享后端开发面试中常见的面试题给大家&#xff0c;每天的题目都是独…...

【Android Studio】解决遇到的一些问题

目录 前言 一、Invalid Gradle JDK configuration found. Open Gradle Settings Change JDK location 报错场景 解决方法 二、adb 不是内部或外部命令&#xff0c;也不是可运行的程序或批处理文件。 报错场景 解决方法 前言 Android Studio的安装过程&#xff0c;可以参…...

UnitTest框架管理测试用例——python自动化测试

UnitTest框架 UnitTest是Python自带一个单元测试框架&#xff0c;常用它来做单元测试。 注意:对于测试来说&#xff0c;UnitTest框架的作用是 自动化脚本(用例代码)执行框架————(使用UnitTest框架来管理 运行多个测试用例的) 为什么使用UnitTest框架 能够组织多个用例去执…...

后端接口开发完成后,接口地址访问不到提示404,Spring项目的包结构错误

后端接口开发完成后&#xff0c;接口地址访问不到提示404&#xff0c;Spring项目的包结构错误 是因为包结构错误&#xff0c;导致无法在请求地址下找到对应的方法&#xff0c;原来错误的包结构&#xff08;自建controller、service、config等包建到了项目包之外、而非项目包之下…...

算法竞赛-基础算法-位运算

目录 1.快速幂 2.快速乘 3.lowbit(n) 4.其他 5.相关题目 6.小结 引言&#xff1a;位运算的主要特点之一是在二进制表示下不进位&#xff0c;一下为一些基础的位运算操作&#xff1a; 与或非异或and,&or,|not,~xor 1.快速幂 快速幂的计算原理就是基于位运算&#x…...

DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加导出数据功能

前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加导出数据功能📚页面效果📚指令输入�…...

深入解析音频编解码器(Audio CODEC):硬件、接口与驱动开发

音频编解码器&#xff08;Audio CODEC&#xff09;是音频处理系统中的核心组件&#xff0c;负责 模拟信号与数字信号的相互转换&#xff0c;广泛应用于 智能音箱、嵌入式系统、消费电子产品 等设备。本篇文章将从 硬件结构、接口解析、驱动开发 和 软件配置 等方面&#xff0c;…...

什么是 Fisher 信息矩阵

什么是 Fisher 信息矩阵 Fisher 信息矩阵是统计学和机器学习中一个重要的概念,它用于衡量样本数据所包含的关于模型参数的信息量。 伯努利分布示例 问题描述 假设我们有一个服从伯努利分布的随机变量 X X X,其概率质量函数为 P ( X ...

【项目合集】智能语音小车-微信小程序控制

功能需求&#xff1a; 车子检测环境温度、湿度&#xff0c;上报 APP、WEB 端显示实时数据可通过 APP 控制小车前进、左转、右转可通过语音控制小车前进后退车上一个 LED 灯&#xff0c;可通过 WEB、小程序控制在 APP、WEB 上均可注册登录 硬件清单 硬件 功能 备注 ESP32 …...

Vue3项目中可以尝试封装那些组件

在 Vue 3 项目中&#xff0c;组件的封装可以根据功能、复用性和业务需求进行划分。以下是一些常见的组件类型&#xff0c;适合封装为独立组件&#xff1a; 1. 基础 UI 组件 按钮 (Button) 封装不同样式、大小、状态的按钮。支持 disabled、loading 等状态。 输入框 (Input) 封…...

Leetcode——151.反转字符串中的单词

题解一 思路 最开始的想法是把一个字符串分为字符串数组&#xff0c;但是不知道一共有几个单词&#xff08;当时没想起来split()&#xff09;&#xff0c;所以选择了用ArrayList储存字符串&#xff0c;在输出时没有考虑ArrayList可以存储空字符串&#xff0c;所以最开始的输出…...

Deepseek+QuickAPI:打造 MySQL AI 智能体入门篇(一)

目录 一、什么是 MySQL AI 智能体&#xff1f; 二、准备工作&#xff1a;认识工具 1. Deepseek 的大模型能力 2. QuickAPI 的功能 3. MySQL 数据库 三、动手实践&#xff1a;用自然语言打造智能体 1. 创建一个用户表 2. 添加样本数据 3. 执行查询 四、效果展示 五、…...

Redis系列:深入理解缓存穿透、缓存击穿、缓存雪崩及其解决方案

在使用Redis作为缓存系统时&#xff0c;我们经常会遇到“缓存穿透”、“缓存击穿”和“缓存雪崩”等问题&#xff0c;这些问题一旦出现&#xff0c;会严重影响应用性能甚至造成服务不可用。因此&#xff0c;理解这些问题的产生原因和解决方案非常重要。 本文将全面讲解缓存穿透…...

python局部变量和全局变量

文章目录 1.局部变量和全局变量2.局部变量2.1 局部变量的作用2.2 局部变量的生命周期 3. 全局变量3.1 函数不能直接修改全局变量的引用3.2 在函数内部修改全局变量的值3.3 全局变量定义的位置3.4 全局变量命名的建议 1.局部变量和全局变量 &#xff08;1&#xff09;局部变量 …...

⭐算法OJ⭐两数之和【哈希表】(C++ 实现)Two Sum

“两数之和”&#xff08;Two Sum&#xff09;是一道非常经典的算法题目&#xff0c;几乎是算法入门和面试准备的必做题之一。它的经典性体现在以下几个方面&#xff1a; 1. 算法入门的基础题目 这道题目是许多初学者接触 哈希表&#xff08;Hash Table&#xff09; 或 字典&…...

【AVRCP】Notification PDUs 深入解析与应用

目录 一、Notification PDUs 概述 二、GetPlayStatus:同步查询播放状态 2.1 命令功能与应用场景 2.2 请求格式(CT → TG) 2.3 响应格式(TG → CT) 2.4 注意事项 2.5 协议实现示例(伪代码) 三、RegisterNotification:异步事件订阅 3.1 命令概述 3.2 命令格式 …...

算法题(100):腐烂的苹果

审题&#xff1a; 本题需要我们判断苹果是否可以完全腐烂&#xff0c;若可以完全腐烂&#xff0c;那么最短腐烂的所需时间是多少 思路&#xff1a; 方法一&#xff1a;多源BFS 首先我们分析腐烂过程&#xff0c;第一批腐烂苹果开始扩散&#xff0c;然后第二批腐烂苹果继续扩散&…...

某快餐店用户市场数据挖掘与可视化

1、必要库的载入 import pandas as pd import matplotlib.pyplot as plt import seaborn as sns2、加载并清洗数据 # 2.1 加载数据 df pd.read_csv(/home/mw/input/survey6263/mcdonalds.csv)# 2.2 数据清洗 # 2.2.1 检查缺失值 print(缺失值情况&#xff1a;) print(df.isn…...

【微服务】如何用Azure容器应用Job处理异步HTTP API请求

【微服务】如何用Azure容器应用Job处理异步HTTP API请求 推荐超级课程: 本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 【微服务】如何用Azure容器应用Job处理异步HTTP API请求Azure容器应用中的长…...

安卓edge://inspect 和 chrome://inspect调试移动设备上的网页

edge://inspect 和 chrome://inspect 是用于调试浏览器中运行的网页和移动设备上的网页的工具。这两个工具分别属于 Microsoft Edge 和 Google Chrome 浏览器。以下是它们的详细介绍&#xff1a; chrome://inspect 如果是直接使用数据线调试&#xff0c;则只需要执行下面的第一…...

TX-LCN 框架

TX-LCN 框架通俗教学&#xff08;面试场景版&#xff09; 一句话概括 TX-LCN 是分布式事务的 “交通警察”&#xff0c;确保多个微服务操作要么全部成功&#xff08;比如转账扣款和到账&#xff09;&#xff0c;要么全部回滚&#xff08;比如网购下单失败后库存自动恢复&#…...

玩转github

me github 可以给仓库添加开发人员吗 4o 是的&#xff0c;GitHub允许仓库管理员为仓库添加开发人员&#xff0c;并设置这些开发人员的角色和权限。这里是一个简单的步骤指导&#xff0c;教你如何给一个 GitHub 仓库添加开发人员&#xff1a; 前提条件 你必须有这个仓库的权限&…...

Dubbo 深度解析

Dubbo 深度解析与实战指南 一、Dubbo 核心设计理念与应用场景 1.1 为什么需要 Dubbo&#xff1f; 随着互联网业务规模扩大&#xff0c;单体架构面临以下挑战&#xff1a; 服务依赖复杂&#xff1a;模块间耦合度高&#xff0c;难以独立迭代[[5]]。性能瓶颈&#xff1a;单一应…...

基于javaweb的SpringBoot校园运动会管理系统设计与实现(源码+文档+部署讲解)

技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论…...

Socket封装---模板方法类

目录 一、模板方法类 二、Socket的框架 三、TCPSocket对父类的虚函数重写 在平时写网络代码的时候&#xff0c;经常会涉及到socket套接字的部分&#xff0c;这一部分用的十分频繁&#xff0c;但是流程都是固定的&#xff0c;我实在是饱受其苦&#xff0c;但是由于C不像java一…...

牛客周赛84 题解 Java ABCDEFG AK实录

目录 题目地址 做题情况 A 题 B 题 C / D 题 E 题 F / G 题 题目地址 牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 做题情况 A 题 import java.io.*; import java.math.*; import java.util.*;// xixi♡西 public class Main {static IOS scnew…...

如何使用MySQL快速定位慢SQL问题?企业级开发中常见业务场景中实际发生的例子,涉及分页查询问题。(二)

如何使用MySQL快速定位慢SQL问题&#xff1f; 在企业级开发中&#xff0c;尤其是涉及到订单查询的业务时&#xff0c;经常会发生慢查询的问题。比如用户翻页到后面的页数时&#xff0c;查询变慢&#xff0c;因为传统的LIMIT offset, size在数据量大时效率低下。这时候&#xff…...

双链笔记新选择!使用Docker私有化部署Logseq知识库远程团队协作

前言&#xff1a;嘿&#xff0c;小伙伴们&#xff0c;今天要给大家安利一个超酷的技能——如何在本地Linux服务器上使用Docker轻松搭建Logseq笔记软件&#xff0c;并通过cpolar内网穿透工具实现远程访问。大家都知道&#xff0c;在快节奏的工作和学习中&#xff0c;一个好的笔记…...

C# 不同框架如何调用framework 和 net core

在 C# 中实现进程间通信&#xff08;IPC&#xff0c;Inter-Process Communication&#xff09;有多种方式&#xff0c;适用于不同场景。以下是常见 IPC 方法的实现方案、代码示例及适用场景对比&#xff1a; 1. 命名管道&#xff08;Named Pipes&#xff09; 特点&#xff1a;…...

【Linux-传输层协议TCP】TCP协议段格式+确认应答+超时重传+连接管理机制(三次握手、四次挥手、理解TIME_WAIT + CLOSE_WAIT)

TCP协议 TCP全称为“传输控制协议&#xff08;Transmission Control Protocol&#xff09;”人如其名&#xff0c;要对数据的传输进行一个详细的控制。 1.TCP协议段格式 下面是TCP报头各个字段的表格形式&#xff1a; 字段名称字段大小描述源端口16位发送端TCP端口号。目的端…...

怎样使用Modbus转Profinet网关连接USB转485模拟从站配置案例

怎样使用Modbus转Profinet网关连接USB转485模拟从站配置案例 Modbus转profinet网关可以将Modbus协议转化为profinet协议&#xff0c;以实现设备之间的数据交互。在实际使用过程中&#xff0c;我们需要使用Modbus协议进行设备通讯&#xff0c;而profinet协议则是用于工业自动化…...

从“自习室令牌”到线程同步:探秘锁与条件变量

目录 互斥 为什么需要锁 锁的原理--互斥 锁的使用 同步 锁的问题 条件变量 互斥 为什么需要锁 先看结果&#xff1a; 以下代码是我模拟创建线程抢票&#xff0c;由于不加锁导致票抢到了负数 main.cc: #include<vector> #include<iostream> #include"…...

Java 大视界 -- Java 大数据在智能政务舆情引导与公共危机管理中的应用(138)

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

LeetCode[59]螺旋矩阵Ⅱ

思路&#xff1a; 这种题我第一次确实没做出来&#xff0c;第一次做的时候一圈一圈处理&#xff0c;发现圈数越往里&#xff0c;越乱&#xff0c;原来之前是没从圈数开始遍历。思路&#xff1a;第一个大循环先遍历圈数&#xff0c;一共遍历n/2圈&#xff0c;如果是奇数那就最后…...

【Python 算法 1.线性枚举】

我装作漠视一切&#xff0c;以为这样就可以不在乎 —— 25.3.17 一、线性枚举的基本概念 1.时间复杂度 线性枚举的时间复杂度为 O(nm)&#xff0c;其中 n是线性表的长度。m 是每次操作的量级&#xff0c;对于求最大值和求和来说&#xff0c;因为操作比较简单&#xff0c;所以 …...

C# 嵌套类 详解

一个类在它的包容类外没有多大意义&#xff0c;就适合设计成嵌套类。 嵌套类&#xff1a;定义在另一个类内部的类。 包容类&#xff08;外部类&#xff09;&#xff1a;包含嵌套类的类。 嵌套类的独特之处是可以为类自身指定private访问修饰符。 嵌套类能访问包容类的任何成…...

深度学习中学习率调整策略

学习率衰减策略是深度学习优化过程中的一个关键因素&#xff0c;它决定了训练过程中学习率的调整方式&#xff0c;从而影响模型收敛的速度和效果。不同的衰减策略在不同的任务和模型上可能有不同的表现&#xff0c;下面从我用到过的几个衰减策略进行记录&#xff0c;后续慢慢跟…...

基于Flask的东方财富网股票数据可视化分析系统

【大数据】基于Flask的东方财富网股票数据可视化分析系统 &#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统能够高效地从东方财富网抓取股票数据&#xff0c;并通过Python的强大数据处理能…...

卓越的用户体验需要智能内容

摘要&#xff1a;这篇文章指出静态文档已无法满足现代用户的需求&#xff0c;而智能内容则是构建卓越用户体验的关键。文章从智能内容的定义、优势和实际应用等方面进行了详细阐述&#xff0c;并强调了企业应积极拥抱智能内容&#xff0c;以提升客户满意度、降低成本并创造新的…...

c++基础知识-图论进阶

一、拓扑排序 1、基础知识 1&#xff09;什么是拓扑排序 对一个有向无环图G进行拓扑排序&#xff0c;是将G中所有顶点排成一个线性序列&#xff0c;使得图中任意一对顶点u和v&#xff0c;若&#xff0c;则u在线性序列中出现在v之前。 2&#xff09;拓扑排序的操作方法 重复执行…...

Java 买百鸡问题

二阶买百鸡问题&#xff1a;母鸡5元一只&#xff0c;公鸡3元一只&#xff0c;35元可以有多少种买法刚好用完&#xff1f; package com.software.first;import java.util.Scanner;public class Test {public static void main(String[] args) {Scanner scan new Scanner(Syste…...

为什么手机上用 mA 和 mAh 来表示功耗和能耗?

在手机上&#xff0c;我们经常会看到 mA&#xff08;毫安&#xff09; 和 mAh&#xff08;毫安时&#xff09; 这两个单位&#xff0c;它们分别用来表示 功耗水平 和 能耗水平。为什么用这两个单位呢&#xff1f;其实这和电流、时间以及电池的特性有关。 1.mA&#xff08;毫安…...

使用SDKMAN!安装springboot

在 Ubuntu 环境中使用 sdk install springboot 命令之前&#xff0c;您需要先安装 SDKMAN!&#xff08;Software Development Kit Manager&#xff09;。以下是详细的安装步骤&#xff1a; 安装 SDKMAN! 打开终端。 运行以下命令以安装 SDKMAN!&#xff1a; curl -s "htt…...

【AI学习从零至壹】Pytorch神经⽹络

Pytorch神经⽹络 神经网络简介神经元激活函数 神经网络神经⽹络的⼯作过程前向传播(forward) 反向传播(backward)训练神经⽹络 Pytorch搭建并训练神经⽹络神经⽹络构建和训练过程数据预处理构建模型优化器&提取训练数据训练样本 神经网络简介 神经元 在深度学习中&#x…...

Linux应用 / 驱动程序崩溃调试

文章目录 前言一、GDB 使用1. GDB 介绍2. Debug版本与Release版本3. 指令演示3.1 显示行号3.2 断点设置3.3 查看断点信息3.4 删除断点3.5 开启 / 禁用断点3.6 运行3.7 打印 / 追踪变量 4. 最常用指令 二、Linux 应用程序调试1. codedump 介绍2. 在 Linux 系统中使用 coredump2.…...

k8s集群-kubeadm init

为了使用阿里云的镜像源加速 kubeadm init 初始化 Kubernetes 集群的过程&#xff0c;你需要修改 kubeadm 的配置文件以指向阿里云提供的镜像仓库。以下是具体步骤&#xff1a; 1. 创建或编辑 kubeadm 配置文件 首先&#xff0c;创建一个 kubeadm 的配置文件&#xff08;如果还…...

Python 视频爬取教程

文章目录 前言基本原理环境准备Python安装选择Python开发环境安装必要库 示例 1&#xff1a;爬取简单直链视频示例 2&#xff1a;爬取基于 HTML5 的视频&#xff08;以某简单视频网站为例&#xff09; 前言 以下是一个较为完整的 Python 视频爬取教程&#xff0c;包含基本原理…...

Linux应用软件编程(多任务:进程间通信)

一.进程间通信 同一主机下&#xff1a; &#xff08;1&#xff09;无名管道&#xff1a;pipe &#xff08;2&#xff09;有名管道&#xff1a;fifo &#xff08;3&#xff09;信号&#xff1a;异步通知机制 &#xff08;4&#xff09;共享内存&a…...

工厂方法模式和抽象工厂模式详解

由于工厂方法模式和抽象工厂模式有点类似&#xff0c;可以放着一块说下。 一、工厂方法模式 (Factory Method Pattern) 场景描述 假设需要实现一个跨平台日志系统&#xff0c;支持文件日志和数据库日志&#xff0c;且未来可能扩展其他日志方式。通过工厂方法模式&#xff0c;…...