css渐变色做出突变色进度条
一开始接到需求的时候以为是一个简单的进度条,用两个div上下重叠,下面放浅色,上面div根据进度设置width长度盖住下方div 即可。
|
|
|
|
效果如下:
不过设计要求要有断点的进图条,并提供给我一张无背景的白点图
我们将原来在上方的div背景图设置为白点,原先在下方的div 的颜色设置为突变色来表达进度
我们常用的渐变色可以一般是从左到右 or 从右到左
|
|
突变色其实就是将渐变色左右两边设置同一个颜色这样就不渐变了,中间左右两边各自用一种颜色渐变。
|
|
|
|
效果如下: