CSS 斜条纹进度条
效果:

代码:
html:
<div class="active-line flex"><!-- lineWidth:灰色背景 --><div class="bg-line"><div v-for="n in 30" class="gray"></div></div><div class="flex line-w"><!-- lineWidth:当前进度长度 --><div class="line" :style="`width: ${lineWidth}px`"></div><div class="round-dot" :style="lineWidth&&'width: 24upx'"></div></div>
</div>
css:
.active-line {width: 420upx;height: 12upx;// background: #EEEEEE;border-radius: 10upx;margin: 42upx 0 0 40upx;position: relative;.line-w {position: absolute;left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);.line {border-radius: 10upx 0 0 10upx;height: 12upx;background: linear-gradient(30deg, #565F6F 0%, #212538 100%);}.round-dot {height: 24upx;border-radius: 50%;background: #212538;}}
}
.flex {display: flex;align-items: center;
}
.bg-line {padding: 0 6upx;display: flex;overflow: hidden;white-space: nowrap;border-radius: 6upx;.gray {display: inline-block;flex-shrink: 0;height: 12upx;width: 12upx;background-color: #eee;transform: skewX(-45deg);margin: 0 2upx;}
}
原理:斜条纹由多个带有倾斜角度的元素组成,直接用一个元素画不出来。
相关文章:
CSS 斜条纹进度条
效果: 代码: html: <div class"active-line flex"><!-- lineWidth:灰色背景 --><div class"bg-line"><div v-for"n in 30" class"gray"></div></div><div…...
JavaScript(1)每天10个小知识点
目录 1. JavaScript 有哪些数据类型,它们的区别?**2. 数据类型检测的方式有哪些**3. null 和 undefined 区别**4. intanceof 操作符的实现原理及实现**5. 如何获取安全的 undefined 值?**6. Object.is() 与比较操作符 “”、“” 的区别*…...
scanf和scanf_s函数详解
目录 引言: 1.scanf函数的用法: 2.scanf_s函数的用法: 3.scanf和scanf_s的区别: 结论: 引言: 在C语言中,输入函数scanf是非常常用的函数之一,它可以从标准输入流中读取数据并将其…...
基于SSM的在线购物系统
末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…...
认识JVM的内存模型
从上一节了解到整个JVM大的内存区域,分为线程共享的heap(堆),MethodArea(方法区),和线程独享的 The pc Register(程序计数器)、Java Virtual Machine Stacks(…...
Java8实战-总结19
Java8实战-总结19 使用流映射对流中每一个元素应用函数流的扁平化 使用流 映射 一个非常常见的数据处理套路就是从某些对象中选择信息。比如在SQL里,你可以从表中选择一列。Stream API也通过map和flatMap方法提供了类似的工具。 对流中每一个元素应用函数 流支持…...
论文浅尝 | 训练语言模型遵循人类反馈的指令
笔记整理:吴亦珂,东南大学硕士,研究方向为大语言模型、知识图谱 链接:https://arxiv.org/abs/2203.02155 1. 动机 大型语言模型(large language model, LLM)可以根据提示完成各种自然语言处理任务。然而&am…...
【云计算网络安全】解析DDoS攻击:工作原理、识别和防御策略 | 文末送书
文章目录 一、前言二、什么是 DDoS 攻击?三、DDoS 攻击的工作原理四、如何识别 DDoS 攻击五、常见的 DDoS 攻击有哪几类?5.1 应用程序层攻击5.1.1 攻击目标5.1.2 应用程序层攻击示例5.1.3 HTTP 洪水 5.2 协议攻击5.2.1 攻击目标5.2.2 协议攻击示例5.2.3 …...
64位Linux系统上安装64位Oracle10gR2及Oracle11g所需的依赖包
在64位Linux系统上安装64位Oracle 10gR2,到底需要装哪些包? 这不是一个完整的安装教程,仅仅探讨在64位CentOS 5.8系统上安装64位Oracle 10gR2,到底需要装哪些RPM包. 实验环境VMWare Workstation 8.0 Linux发行版: CentOS 5.8 x86_64 Kernel版本: 2.6.18-308.el5 Oracle Dat…...
Unity InputSystem 基础使用之鼠标交互
资料 官方文档 导入InputSystem包 Package Manager 搜索Input System进行下载启用该包,会重启Unity Editor 注意 InputSystem可以和旧版输入系统一起使用 设置:Project Settings->Player->Other Settings->Configuration->Active Input…...
《算法竞赛·快冲300题》每日一题:“二进制数独”
《算法竞赛快冲300题》将于2024年出版,是《算法竞赛》的辅助练习册。 所有题目放在自建的OJ New Online Judge。 用C/C、Java、Python三种语言给出代码,以中低档题为主,适合入门、进阶。 文章目录 题目描述题解C代码Java代码Python代码 “ 二…...
CnosDB 签约京清能源,助力分布式光伏发电解决监测系统难题。
近日,京清能源采购CnosDB,升级其“太阳能光伏电站一体化监控平台”。该平台可以实现电站设备统一运行监控,数据集中管理,为操作人员、维护人员、管理人员提供全面、便捷、差异化的数据和服务。 京清能源集团有限公司(…...
汇编:lea 需要注意的一点
lea和mov的效用上不一样,如果当前%rsi的值是0, lea 0x28(%rsi),%rax ,这个只是计算一个地址,而不是去做地址访问。 mov 0x8(%rsi),%rsi,而这个mov,在计算完地址,还要访问内存地址。如果rsi是0&a…...
SQL语言的分类:DDL(数据库、表的增、删、改)、DML(数据的增、删、改)
数据库管理系统(数据库软件)功能非常多,不仅仅是存储数据,还要包含:数据的管理、表的管理、库的管理、账户管理、权限管理等。 操作数据库的SQL语言,基于功能,划分为4类: 1、数据定…...
微信小程序精准扶贫数据收集小程序平台设计与实现
摘 要 近些年以来,随着我国的互联网技术的不断进步,计算机科学技术的发展也在不断的快速发展。在当下“互联网”的带动下,我国的各行各业,上到政府机关下到小微企业都通过互联网的发展带动取得了很好的发展势头。我国这两年来通过…...
PostgreSQL 流复制搭建
文章目录 前言1. 配置环境1.1 环境介绍1.2 主库白名单1.3 主库参数配置 2. 流复制搭建2.1 备份恢复2.2 创建复制用户2.3 参数修改2.4 启动并检查2.5 同步流复制2.6 同步复制级别 3. 流复制监控3.1 角色判断3.2 主库查看流复制3.3 延迟监控3.4 备库查询复制信息 前言 PostgreSQ…...
机器学习笔记之最优化理论与方法(十)无约束优化问题——共轭梯度法背景介绍
机器学习笔记之最优化理论与方法——共轭梯度法背景介绍 引言背景:共轭梯度法线性共轭梯度法共轭方向共轭VS正交共轭方向法共轭方向法的几何解释 引言 本节将介绍共轭梯度法,并重点介绍共轭方向法的逻辑与几何意义。 背景:共轭梯度法 关于…...
Mybatis核心对象及工作流程
目录 一、mybatis核心对象 (1)SqlSession对象直接操作数据库 (2)SqlSession对象通过代理对象操作数据库 二、mybatis工作流程 一、mybatis核心对象 (1)SqlSessionFactoryBuilder SqlSession工厂构建者对…...
无swing,高级javaSE毕业之贪吃蛇游戏(含模块构建,多线程监听服务),已录制视频
JavaSE,无框架实现贪吃蛇 B站已发视频:无swing,纯JavaSE贪吃蛇游戏设计构建 文章目录 JavaSE,无框架实现贪吃蛇1.整体思考2.可能的难点思考2.1 如何表示游戏界面2.2 如何渲染游戏界面2.3 如何让游戏动起来2.4 蛇如何移动 3.流程图…...
Kafka3.0.0版本——消费者(消费者组详细消费流程图解及消费者重要参数)
目录 一、消费者组详细消费流程图解二、消费者的重要参数 一、消费者组详细消费流程图解 创建一个消费者网络连接客户端,主要用于与kafka集群进行交互,如下图所示: 调用sendFetches发送消费请求,如下图所示: (1)、Fet…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具,相比原生 Python 生态(如 pip 虚拟环境)有许多独特优势,尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处: 一、一站式环境管理:…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
高等数学(下)题型笔记(八)空间解析几何与向量代数
目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral(热门工具 Ruff 的开发者)推出的下一代高性能 Python 包管理器和构建工具,用 Rust 编写。它旨在解决传统工具(如 pip、virtualenv、pip-tools)的性能瓶颈,同时…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7
在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤: 第一步: 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为: // 改为 v…...
