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;}
}
原理:斜条纹由多个带有倾斜角度的元素组成,直接用一个元素画不出来。

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

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

相关文章

win10环境安装使用docker-maxwell

目的&#xff1a;maxwell可以监控mysql数据变化&#xff0c;并同步到kafka、mq或tcp等。 maxwell和canal区别&#xff1a; maxwell更轻量&#xff0c;canal把表结构也输出了 docker bootstrap可导出历史数据&#xff0c;canal不能 环境 &#xff1a;win10&#xff0c;mysql5…

PYTHON(一)——认识python、基础知识

一、为什么要学习python&#xff1f; Python 被认为是人工智能、机器学习的首选语言&#xff0c;可以说是全世界最流行通用范围最广的语言&#xff0c;几乎可以完成所有的任务&#xff0c;像设计游戏、建网站、造机器人甚至人工智能等都广泛使用Python。 二、输出&#xff08;…

机器学习——K最近邻算法(KNN)

机器学习——K最近邻算法&#xff08;KNN&#xff09; 文章目录 前言一、原理二、距离度量方法2.1. 欧氏距离2.2. 曼哈顿距离2.3. 闵可夫斯基距离2.4. 余弦相似度2.5. 切比雪夫距离2.6. 马哈拉诺比斯距离2.7. 汉明距离 三、在MD编辑器中输入数学公式&#xff08;额外&#xff0…

门面设计模式

github&#xff1a;GitHub - QiuliangLee/pattern: 设计模式 1 什么是门面设计模式 门面设计模式是一种软件设计模式&#xff0c;也被称为外观&#xff08;Facade&#xff09;模式。它提供了一个简单的接口&#xff0c;让客户端能够访问复杂系统中的一组接口。通过门面模式&a…

企业架构LNMP学习笔记15

客户端缓存&#xff1a; B/S架构里&#xff0c;Browser是浏览器&#xff0c;就是客户端。 客户端缓存告知浏览器获取服务段的信息是在某个区间时间段是有效的。 每次请求从服务器拿一遍数据&#xff0c;数据没有变化&#xff0c;影响带宽&#xff0c;影响时间。刷新又要去加载…

Java中快速排序的优化技巧:随机取样、三数取中和插入排序

目录 快速排序基础 优化1&#xff1a;随机取样 优化2&#xff1a;三数取中 优化3&#xff1a;插入排序 总结&#xff1a; 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;它的平均时间复杂度为O(n log n)。然而&#xff0c;在某些情况下&…

Python实现猎人猎物优化算法(HPO)优化BP神经网络回归模型(BP神经网络回归算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…

spring boot-Resolved element must not contain multiple elements 警告

首先强调一下&#xff0c;此问题不影响程序运行。 报错信息&#xff1a; package org.springframework.util; ...public abstract class Assert ...public static void state(boolean expression, String message) {if (!expression) {throw new IllegalStateException(messa…

人工智能TensorFlow PyTorch物体分类和目标检测合集【持续更新】

1. 基于TensorFlow2.3.0的花卉识别 基于TensorFlow2.3.0的花卉识别Android APP设计_基于安卓的花卉识别_lilihewo的博客-CSDN博客 2. 基于TensorFlow2.3.0的垃圾分类 基于TensorFlow2.3.0的垃圾分类Android APP设计_def model_load(img_shape(224, 224, 3)_lilihewo的博客-CS…

flink 端到端一致性

背景 我们经常会混淆flink提供的状态一致性保证和数据端到端一致性保证的关系&#xff0c;总以为他们表达的是同一个意思&#xff0c;事实上&#xff0c;他们不是一个含义&#xff0c;flink只能保证其维护的内部状态的一致性&#xff0c;而数据端到端的一致性需要数据源&#…

安装samba服务器

1.实验目的 &#xff08;1&#xff09;了解SMB和NETBIOS的基本原理 &#xff08;2&#xff09;掌握Windows和Linux之间&#xff0c;Linux系统之间文件共享的基本方法。 2.实验内容 &#xff08;1&#xff09;安装samba服务器。 &#xff08;2&#xff09;配置samba服务器的…

unity 控制Dropdown的Arrow箭头变化

Dropdown打开下拉菜单会以“Template”为模板创建一个Dropdown List&#xff0c;在“Template”上添加一个脚本在Start()中执行下拉框打开时的操作&#xff0c;在OnDestroy()中执行下拉框收起时的操作即可。 效果代码如下用于控制Arrow旋转可以根据自己的想法进行修改&#xff…

算法:移除数组中的val的所有元素---双指针[2]

文章来源&#xff1a; https://blog.csdn.net/weixin_45630258/article/details/132689237 欢迎各位大佬指点、三连 1、题目&#xff1a; 给你一个数组 nums和一个值 val&#xff0c;你需要原地移除所有数值等于 val 的元素&#xff0c;并返回移除后数组的新长度。 不要使用…

【Proteus仿真】【STM32单片机】血压心率血氧体温蓝牙

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 系统运行后&#xff0c;LCD1604液晶显示心率、血氧、血压和体温&#xff0c;及其阈值&#xff1b;可通过K3键进入阈值设置模式&#xff0c;K1和K2加减调节&#xff0c;K4确定&#xff1b;当检测心率、血氧…

linux 多重启动grub2详解

https://www.gnu.org/software/grub/manual/grub/grub.pdf

Linux C进程间通信(IPC)

概述 每个进程有独立的进程空间&#xff1a; 好处————安全 缺点&#xff1a;开销大&#xff08;独立的地址空间&#xff09;&#xff1b;进程的通信更加困难&#xff08;对其他进程的操作开销也大&#xff09; 广义上的进程间通信&#xff1a; A进程写给文件/数据库&am…

Python测试框架 Pytest —— mock使用(pytest-mock)

pytest-mock 安装&#xff1a;pip install pytest-mock 这里的mock和unittest的mock基本上都是一样的&#xff0c;唯一的区别在于pytest.mock需要导入mock对象的详细路径。 # weateher_r.py class Mock_weather():def weather(self):天气接口passdef weather_result(self):模…

【算法训练-链表 七】【排序】:链表排序、链表的奇偶重排、重排链表

废话不多说&#xff0c;喊一句号子鼓励自己&#xff1a;程序员永不失业&#xff0c;程序员走向架构&#xff01;本篇Blog的主题是【链表的排序】&#xff0c;使用【链表】这个基本的数据结构来实现&#xff0c;这个高频题的站点是&#xff1a;CodeTop&#xff0c;筛选条件为&am…

光栅和矢量图像处理:Graphics Mill 11.4.1 Crack

Graphics Mill 是适用于 .NET 和 ASP.NET 开发人员的最强大的成像工具集。它允许用户轻松向 .NET 应用程序添加复杂的光栅和矢量图像处理功能。 光栅图形 加载和保存 JPEG、PNG 和另外 8 种图像格式 调整大小、裁剪、自动修复、色度键和 30 多种其他图像操作 可处理任何尺寸&am…

Blender--》页面布局及基本操作讲解

接下来我会在three.js专栏中分享关于3D建模知识的文章&#xff0c;如果学习three朋友并且想了解和学习3D建模&#xff0c;欢迎关注本专栏&#xff0c;关于这款3D建模软件blender的安装&#xff0c;我在前面的文章已经讲解过了&#xff0c;如果不了解的朋友可以去考考古&#xf…