css repeating-linear-gradient实现条纹进度条效果

最新推荐文章于 2024-03-05 09:39:29 发布
最新推荐文章于 2024-03-05 09:39:29 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： css html 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hhthht8888/article/details/85270367
版权
html 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
css
8 篇文章 0 订阅
订阅专栏

html :

<!DOCTYPE html>
<html>
<head>
    <title>模拟进度条条纹样式</title>
    <link rel="stylesheet" href="style_stripe.css">
</head>
<body>
    <div class="progress_bar"></div>
</body>
</html>

css:

.progress_bar{
    height: 40px;
    width: 700px;
    background: #58a;
    background-image: repeating-linear-gradient(30deg,
    hsla(0,0%,100%,.1),
    hsla(0,0%,100%,.1) 15px,
    transparent 0,transparent 30px);
    border-radius: 5px;
}

最终效果如下：
在这里插入图片描述

Joris要为所欲为
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3绿色条纹loading进度条代码.zip
07-04
CSS3绿色条纹loading进度条代码，适合做响应式页面的加载过度页。
CSS学习笔记之可重复渐变（repeating-linear-gradient）
09-27
在CSS中，`repeating-linear-gradient`是一种创建可重复线性渐变的工具，它可以将一个简单的线性渐变在指定方向上无限重复，从而产生各种有趣的视觉效果，如条纹、格子或其他图案。这个功能对于网页设计，尤其是创建...
【CSS3动画】条状的加载中的动画效果
weixin_30616969的博客
01-04 257
原创，转载请注明出处，谢谢 昨天看到这么一张gif图，然后今天试了试做成了动画，纯CSS3实现，不支持IE9及以下。 缺点： 木有效果图诶，只能您自己动手建个文件看一下咯~ 延迟我只想到了分开定义，对于数量多的情况下似乎就不太友好了。。。写个js可以实现，暂时没想到纯的CSS的解决办法 1 <!DOCTYPE html> 2 <ht...
美化进度条进阶——repeating-linear-gradient
weixin_34199335的博客
02-13 751
前言 一个好看的进度条会给用户更棒的操作体验，但是我搜索网上的进度条样式，并没有找到符合需求的进度条，为什么呢？ 网上的进度条太粗，究其根本是linear-geadient在捣鬼。 普通进度条 一个普通进度条包括外边框、内边框、进度条和百分比框。以及它需要实现的动效，比如进度条需要从0开始增长，百分比框要随着进度条联动。 html： // 外边框：宽，高，内边距，背景颜色，圆角 <div ...
使用repeating-linear-gradient创建一个条纹卡片效果
cccccl的博客
08-24 189
使用repeating-linear-gradient创建一个条纹卡片效果 只使用了角度值和色标 <style> div{ border-radius: 20px; width: 70%; height: 400px; margin: 50 auto; background: repeating-linear-gradient( 45deg, // 角度值 yellow 0px, // 色标 yell...
css3 linear-gradient实现页面加载进度条效果
aiduomei8353的博客
01-04 168
最终效果图： 　　 html结构： <div> <p class="p1"> <span></span> </p> <p class="p2"> <span></span> </p> <p class="p3"&...
【前端实例】css实现动态条纹背景进度条
LaoYe的博客
03-05 5533
【一、提出需求】 容器的背景拥有动态效果，看起来就像是在运动着 【二、思路】 结合以往的经验，动态效果其实就是从某一点到指定点或者说某一个值到指定值在指定时间内变化的过程。背景样式中涉及到位置只有 background-position 想要实现背景滚动有两种方式，第一种是通过导入背景图片然后令背景的位置不断发生变化，从而形成滚动效果；第二种就是通过不同颜色的混合令背景的位...
html5借用repeating-linear-gradient实现一把刻度尺（ruler）
01-19
像刻度这种东西都是重复性的，说到重复我就想到了repeating-linear-gradient，看名字就能知道是重复线性渐变，它能更方便的实现隔行变色的功能，如果你想画一个背景，它是重复、隔行的，那么用它就没错了；...
流动的箭头 - 线性流动组件（repeating-linear-gradient，@keyFrames）
10-05
在大屏数据展示中，若是按节点展示在不同数据层的数据时，为了形象体现数据的流动效果，需要让节点之间，层与层之间用**流动的虚线+箭头**连接。正常情况下，数据需要从上个节点底部出发到下个节点顶部结束，层与层...
CSS3 background-image颜色渐变的实现代码
12-02
background-image: repeating-linear-gradient(to right, red 0, red 50px, yellow 50px, yellow 100px); ``` 5. **透明度和 rgba()** 除了纯色之外，还可以使用`rgba()`函数引入透明度。例如，`rgba(255, 0, 0,...
CSS 斜条纹进度条动画
m0_64491262的博客
06-20 980
CSS 进度条动画样式
css3条纹进度条
weixin_30808253的博客
09-26 553
新建div，取名progress，如下 <div class="progress"></div> 在里面插入条纹进度条,以及进度显示文本进度： <div class="progress-bar progress-bar-info progress-bar-striped active" style="width: 75%;"> <div c...
css动画和渐变
Machoul的博客
06-28 4109
通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果,渐变是图片，需要通过来设置:线性渐变，颜色沿着一条直线发生变化 线性渐变的开头，我们可以指定一个渐变的方向 渐变可以同时指定多个颜色，多个颜色默认情况下平均分布,也可以手动指定渐变的分布情况 可以平铺的线性渐变 径向渐变(放射性的效果) css动画 过渡 通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验:指定要执行过渡的属性 :指定过渡效果的持续时间 :
CSS 斜条纹进度条
weixin_58031521的博客
09-09 1214
【代码】CSS 斜条纹进度条。
css实现倾斜条纹（斑马线），可用于进度条等
绿葡萄的博客
07-29 2117
css3实现倾斜条纹（斑马线），可用于进度条等。
用css写进度条
liuman02的专栏
05-01 899
我们平时写进度条一般是一个父div包裹一个子div，用js控制子div的宽度 实现进度条，我们现在可以用css简单实现进度条了。 代码如下： 在vue项目里咱们只需要控制数字就行了，非常简单方便 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
使用css 实现渐变色条纹丝滑进度条
最新发布
PhoenixGuangyu的博客
03-05 715
【代码】使用css 实现渐变色条纹丝滑进度条。
纯css3斑马条纹进度条加载动画效果
ICode联盟
11-24 508
下载地址 实现纯css3代码实现的类似斑马条纹的进度条效果，带动画效果的加载进度条，有很多种颜色任意自定义，当然这只是个加载进度的效果并不是真的百分比进度。 dd:
css 实现进度条条形码和滚动
qq_25186543的博客
02-07 620
进度条实现隔色条形用到  background-imag .progress-blue2{ background-image: -webkit-linear-gradient(45deg,#195bb1 25%,rgba(27,95,179,1) 25%,rgba(27,95,179,1) 50%,#195bb1 50%,#195bb1 75%,rgba(27,95,179,1) 75%
css repeating-linear-gradient
08-08
repeating-linear-gradient 是一个 CSS 函数，用于创建一个重复的线性渐变背景。它可以在元素的背景中创建连续的线性渐变效果。 这个函数接受一系列参数来定义渐变的起点、终点、颜色和重复方式。以下是一个示例代码： ```css background: repeating-linear-gradient( angle, color-stop1, color-stop2, ... ); ``` 其中的参数解释如下： - `angle`：渐变的角度，可以使用度数（以度为单位）或关键字（如 `to top`、`to right` 等）来指定方向。 - `color-stop`：定义渐变中的颜色和位置。可以通过指定颜色值或颜色值和位置来定义。位置可以是像素值、百分比或关键字（如 `top`、`left` 等）。 以下是一个具体的例子： ```css background: repeating-linear-gradient( 45deg, red 0%, yellow 20%, blue 40% ); ``` 这个例子创建了一个从红色到黄色再到蓝色的线性渐变，每隔20%的距离重复一次，角度为45度。你可以根据需要调整参数来创建不同的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值