css 之 linear-gradient 之进度条（progress bar）

程序员文章站 2022-07-08 19:18:39

...

css 之 linear-gradient 之进度条（progress bar）

博客分类： css cssgradientlinear-gradient进度条progress bar

CSS 的 linear-gradient() 函数会创建一个线性渐变色的 IMAGE 图象。
该函数返回的对象的 CSS 数据类型为：gradient。

线性渐变图像本身没有固定的大小，而是跟元素的大小相匹配。
线性渐变图像定义时使用：轴、渐变线。

轴：渐变线由含渐变图像框中心的角度定义。
颜色：渐变的颜色是由不同的点定义，起点，终点。中间可以加颜色点。

起始点：
是渐变线上颜色最先开始的点。
它是由梯度线和垂直通过在同一象限的框角之间的交点定义。

同样，
结束点：
是渐变线的颜色最终抵达的点。
它也可以通过渐变线和附近的角落发出的垂直线的交点定义。
但更容易定义为出发点的对称，当反射点与原点的带框的中心混淆。

这些出发点和结束点的一些复杂的定义引出了一个有趣的属性，
有时称为魔角：起始点和结束点附近的角落也有相同的颜色作为各自的开始和结束点。

颜色停止点：
不仅仅是起始点和结束点可以指定颜色。
通过对渐变线定义额外的颜色停止点，
Web开发人员可以创建一个自定义过渡的开始和结束之间的颜色，或提供一个多色渐变。
线性渐变语法不允许重复（repeat），但通过使用颜色停止点，同样可以达到效果。

颜色停止点的位置：
被隐式定义（未指定）时，它被放置在它前面的点和后面的点之间的中间位置。
该位置还可以通过使用 length 或 “%” CSS数据类型来显式定义。

有时我们不希望从开始点渐变，则加一个同样颜色的颜色停止点即可。
例如，从60%处开始渐变：

background: linear-gradient(135deg, red, red 60%, blue);

这种情况下，可以省略第一个颜色（效果同上）：

background: linear-gradient(135deg, red 60%, blue);

-

下面是实现了部分进度条样式的CSS：

<!DOCTYPE html>  
<html>  
<head>  
<style>  

#grad1{
  height: 200px;  
  width: 100%;   
  background-size: 100px 100px;  
  background-repeat: no-repeat;  
  background-color: #5A88B7;  
  background-image: 
     linear-gradient(  
         0deg, 

         rgba(255, 0, 0, 0.5),
         rgba(255, 0, 0, 0.5) 25%,   

         transparent 25%,
         transparent 50%,  

         rgba(0, 255, 0, 0.3) 50%, 
         rgba(0, 255, 0, 0.3) 75%,   

         transparent 75%,
         transparent
     );  
  
   
}  
  
</style>  
</head>  
<body>
         <div id="grad1"></div>
</body>  
</html>

效果图：

让横线斜起来：

<!DOCTYPE html>  
<html>  
<head>  
<style>  

#grad1{
  height: 200px;  
  width: 100%;   
  background-size: 100px 100px;  
  background-repeat: no-repeat;  
  background-color: #5A88B7;  
  background-image: 
     linear-gradient(  
         -45deg, 

         rgba(255, 255, 255, 0.2), 
         rgba(255, 255, 255, 0.2) 25%,   

         transparent 25%,
         transparent 50%,  

         rgba(255, 255, 255, 0.2) 50%,   
         rgba(255, 255, 255, 0.2) 75%,   

         transparent 75%,
         transparent
     );
}  
  
</style>  
</head>  
<body>  
	<div id="grad1"></div>
</body>  
</html>

效果图：

使背景图片填满元素：

  background-repeat: repeat;

代码：

<!DOCTYPE html>  
<html>  
<head>  
<style>  

#grad1{
  height: 200px;  
  width: 100%;   
  background-size: 100px 100px;  
  background-repeat: repeat;  
  background-color: #5A88B7;  
  background-image: 
     linear-gradient(  
         -45deg, 

         rgba(255, 255, 255, 0.2), 
         rgba(255, 255, 255, 0.2) 25%,   

         transparent 25%,
         transparent 50%,  

         rgba(255, 255, 255, 0.2) 50%,   
         rgba(255, 255, 255, 0.2) 75%,   

         transparent 75%,
         transparent
     );
}  
  
</style>  
</head>  
<body>  
	<div id="grad1"></div>
</body>  
</html>

效果图：

当然，要实现滚动效果，还需要加上JavaScript，让背景图移动。
让整个图片背景动起来。看起来象加载一样。

浏览器兼容：


.grad { 
  background-color: #F07575; /* fallback color if gradients are not supported */
  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */ 
  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
}

-
引用请注明，
原文出处：http://lixh1986.iteye.com/blog/2376395

-
参考：
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
测试：
https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_ltr

-