前端.进度条样式的原理与解释

来源：互联网发布：女生提气质知乎编辑：程序博客网时间：2024/05/16 09:14

模仿项目的时候看见的又CSS3写的进度条样式，十分美观

但是该内容在书上和W3S里涉及的也很少，看的不是很懂，在网上拜读大神的总结之后分享一下我的收获。
首先要理解渐变属性与自定义渐变
渐变属性分两种：linear-gradient和radial-gradient
radial-gradient是径性渐变，即类似从圆的中性向四周渐变那种
linear-gradient是线性渐变，顾名思义是沿直线进行渐变，也就是进度条样式的核心
EX：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>linear-gradient</title>      <style type="text/css">      *{margin:0;padding:0;}      .posDir{margin:100px auto;}      .linearBar{width:100px;height:100px;border:1px solid #ccc;          background-color: #009FCC;       background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent)     /*********************************偏向角度,起始点颜色,终止点颜色***************/      }      </style>  </head>  <body>      <div class="linearBar posDir"></div>  </body>  </html>

这里写图片描述
其中核心的一段的解释，
（rgba(255, 255, 255, .15)是用RGB颜色定位所表示的一个颜色，暂称这个颜色为A色）

background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%,
设置背景图为——线性渐变（（默认从左下角到右上角）四十五度角，从0%到25%为A色）
transparent 25%,transparent 50%,rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
从25%到50%为透明，从50%到75%为A色
ransparent 75%, transparent
，从75%到100%为透明
注意点：
1.需要先设置一个底色
2.0%的颜色定义不用写
3.100%是默认值，可以不写

然后就是进度条。进度条样式一般分为三个层次
①最底层颜色——一般为灰色

.progress{margin:100px auto;width:50%;border-radius:5px;      height:20px;overflow:hidden;background-color:#ebebeb;}

这里写图片描述
②进度条底色

.progress-bar{float:left;width:0;height:100%;color:#fff;text-align:center;      background-color: #B667BD;}

这里写图片描述
③渐变交叉

.progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;      background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);      background-size:40px 40px;  }

这里写图片描述
整个的源码是

<!DOCTYPE html>      <html lang="en">      <head>      <meta charset="UTF-8">      <title>linear-gradient</title>      <style type="text/css">      *{margin:0;padding:0;font-family:"微软雅黑";}      .progress{margin:100px auto;width:50%;border-radius:5px;          height:20px;overflow:hidden;background-color:#ebebeb;}      .progress-bar{float:left;width:0;height:100%;color:#fff;text-align:center;          background-color: #B667BD;}      .progress-bar-striped{width:100px;height:100px;border:1px solid #ccc;          background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);          background-size:40px 40px;      }      </style>  </head>  <body>      <div class="progress">          <div class="progress-bar progress-bar-striped" style="width:60%">60%</div>      </div>  </body>  </html>

还可以通过CSS3让进度条动起来，咸鱼我弄懂之后会继续写一篇。

0 0