`

css 之 linear-gradient 之 进度条(progress bar)

    博客分类:
  • css
阅读更多


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







-









  • 大小: 55.1 KB
  • 大小: 26.8 KB
  • 大小: 6.7 KB
  • 大小: 6.9 KB
  • 大小: 29.8 KB
分享到:
评论

相关推荐

    css3-progress-bar-linear-color.zip

    标题中的"css3-progress-bar-linear-color.zip"表明这是一个关于CSS3线性进度条颜色效果的资源包。在网页设计中,进度条是一个常见的元素,用于显示任务或过程的完成度。CSS3是CSS(层叠样式表)的第三个主要版本,...

    Html5炫酷进度条-html5-css3-progress-bar

    在本项目“Html5炫酷进度条-html5-css3-progress-bar”中,我们将探讨如何利用这两种技术来创建一个既实用又具有视觉吸引力的进度条组件。 HTML5的`&lt;progress&gt;`元素是用于显示任意任务的进度的标准化方式。它为用户...

    CSS3实现多彩进度条动画.zip

    在这个例子中,`progress-bar-container` 是进度条的外框,而 `progress-bar` 表示当前完成的进度,初始宽度设置为50%,代表进度条已完成一半。 接下来,我们使用CSS3来美化这个进度条。首先,给容器添加背景颜色和...

    CSS3实现渐变的loading加载进度条特效代码.zip

    1. **线性渐变(Linear Gradient)**:在CSS3中,我们可以使用`background-image: linear-gradient()`属性创建线性渐变。通过指定起点和终点,以及中间的颜色和位置,我们可以定制出不同方向和颜色变化的渐变效果。...

    css3 iOS8风格loading加载进度条动画

    1. **渐变(Gradients)**:iOS8加载条通常使用线性渐变来呈现背景,这可以通过CSS3的`linear-gradient`属性实现。例如,可以设置一个从浅灰色到深灰色的水平渐变。 2. **伪元素(Pseudo-elements)**:使用`:...

    css实现原型进度条效果

    这里有两个主要的div元素:`.circle-progress`是容器,`.progress-bar`是实际的进度条部分。 接下来,我们需要为这些元素添加样式。首先,为`.circle-progress`设置基本样式,使其呈现圆形: ```css .circle-...

    纯CSS3进度条

    在这个例子中,`.progress-bar`是进度条容器,`.progress`是实际的进度填充部分。我们可以使用CSS3来定义它们的样式: ```css .progress-bar { width: 100%; height: 20px; background-color: #f1f1f1; border-...

    css+js动态进度条的实现

    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);...

    渐变进度条 美化进度条

    在CSS中,我们可以使用`linear-gradient`属性来创建线性渐变,或者使用`radial-gradient`来创建径向渐变。以下是一个简单的线性渐变进度条的例子: ```css .progress-bar { width: 100%; height: 20px; ...

    绿色条纹css3进度条代码.zip

    总结起来,创建“绿色条纹css3进度条代码”涉及到HTML5的`&lt;progress&gt;`元素、CSS3的渐变和伪元素以及JavaScript或jQuery来控制进度。通过这些技术的结合,开发者可以为用户提供一个美观且功能完备的进度条,提升用户...

    ios进度条,无图片,css3,漂亮,加载速度快

    iOS进度条的特色是具有条纹效果,这可以通过CSS3的`linear-gradient`实现。这里的渐变从左到右分为两部分:一部分保持背景色,另一部分使用稍浅的颜色,以产生条纹视觉。 4. **进度动画**: 为了实现动态加载...

    CSS3彩色进度条加载动画_CSS3_动画特效_

    这里,`::-webkit-progress-bar`是进度条的容器,而`::-webkit-progress-value`则是实际的进度部分。通过`transition`属性,我们为进度值的宽度变化添加了一个平滑的动画效果。 **进度百分比显示** 要显示进度...

    html5 CSS3渐变进度条动画效果

    总结起来,HTML5的`&lt;progress&gt;`标签与CSS3的渐变和动画特性结合,能够创建出美观且具有动态效果的进度条。这不仅可以提升用户界面的视觉吸引力,还能提供更好的用户体验。在实际开发中,掌握这些技巧对于提升网站或...

    超炫酷的CSS3进度条动画 背景色渐变

    这里的`.progress-bar`是进度条容器,`.progress`则是表示当前进度的部分。 接下来,我们将使用CSS3来定义这个进度条的样式。为了实现背景颜色渐变,我们可以这样设置`.progress`的背景: ```css .progress { ...

    (常用代码)CSS3 进度条效果的实现

    background-image: linear-gradient(to right, #4caf50, #4caf50 50%, #ccc 50%); background-size: 200% 100%; animation: gradientMove 2s ease infinite; } @keyframes gradientMove { 0% { background-...

    纯CSS3进度条渐变加载特效代码.zip

    animation: progress-bar-fill 2s linear forwards; } ``` 这里的`2s`是动画持续时间,`linear`是速度曲线(匀速),`forwards`确保动画结束后保持最后一帧的状态。 此外,为了使进度条更美观,我们还可以利用CSS...

    css3渐变进度条加载动画特效

    CSS3支持两种类型的渐变:线性渐变(linear-gradient)和径向渐变(radial-gradient)。在这个特效中,我们将主要使用线性渐变来创建颜色过渡的效果。 线性渐变的基本语法如下: ```css background: linear-...

    css3彩色loading加载进度条动画特效

    例如,我们可以使用`linear-gradient()`函数定义一个从一种颜色到另一种颜色的渐变,使进度条看起来更加生动和吸引人。 ```css .progress-bar { background-image: linear-gradient(to right, red, orange, yellow...

    CSS3多种不同颜色进度条.zip

    在前端开发中,CSS3(层叠样式表第三版)为网页设计提供了许多新的特性和增强功能,其中之一就是实现各种自定义的进度条效果。"CSS3多种不同颜色进度条.zip"这个压缩包可能包含了一系列示例,展示了如何利用CSS3来...

Global site tag (gtag.js) - Google Analytics