- 浏览: 1115993 次
文章分类
- 全部博客 (379)
- S2SH (16)
- stuts2 (0)
- java语言 (81)
- JSP (17)
- <html>元素 (11)
- javaweb (4)
- web容器 (3)
- ext (23)
- javaScript (48)
- ant (1)
- liferay (1)
- sql (9)
- css (42)
- 浏览器设置 (3)
- office_world (1)
- eclipse (4)
- 其它 (28)
- 操作系统 (5)
- android (6)
- Struts2 (11)
- RegEx (3)
- mysql (5)
- BigDATA (1)
- Node.js (1)
- Algorithm (10)
- Apache Spark (1)
- 数据库 (5)
- linux (2)
- git (1)
- Adobe (3)
- java语言,WebSocket (1)
- Maven (3)
- SHELL (1)
- XML (2)
- 数学 (2)
- Python (2)
- Java_mysql (1)
- ReactJS (6)
- 养生 (4)
- Docker (1)
- Protocols (3)
- java8 (2)
- 书籍 (1)
- Gradle (2)
- AngularJS (5)
- SpringMVC (2)
- SOAP (1)
- BootstrapCSS (1)
- HTTP协议 (1)
- OAuth2 (1)
最新评论
-
Lixh1986:
Java并发编程:自己动手写一把可重入锁https://blo ...
Java之多线程之Lock与Condition -
Lixh1986:
http://win.51apps.com.cn/https: ...
temp -
ztwsl:
不错,支持很好
HttpServletRequest和ServletRequest的区别 -
guodongkai:
谢谢您能将知识精华汇编总结,让初学者们从原理中学会和提高。
javaScript之function定义 -
kangwen23:
谢谢了,顶顶
struts2中的ValueStack学习
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
-
发表评论
-
Flex之 justify-content 和 flex-direction 的应用
2021-12-23 19:39 436flex 简介: 采用Flex布局的元素,被称为Flex容 ... -
CSS之页面元素飞入效果
2020-04-18 17:50 790效果预览: - https://www.runoob.com ... -
CSS之垂直居中
2020-04-02 10:00 472css里面用text-align:center ... -
Sass之&引用父选择器
2018-08-08 11:29 8290Sass之&引用父选择器 描述: 您可以使用&字符选 ... -
HTML5之canvas之粒子效果
2018-01-26 10:32 1473效果图: JavaScript 代码实现: & ... -
CSS之导航栏设计之 ul 之 li 标签排成一行
2019-06-04 11:11 2440在HTML页面元素设计中, 把具有相同一类功能的列表用 li ... -
HTML5/CSS3鼠标滑过图片滤镜动画效果
2017-12-21 10:54 1331HTML5/CSS3鼠标滑过图片滤镜动画效果 以前我们用CS ... -
CSS之提示框实现
2017-08-02 05:08 1970效果图: 注意以下要点: 1、提示框的箭头效果,且箭头 ... -
Responsive Web Design(自响应式网页设计)
2017-05-28 22:43 1254Responsive Web Design(自响 ... -
在 css 中使用 @font-face
2017-05-24 14:15 564@font-face 允许用户使用自定义的字体。在css中定义 ... -
jQuery之mouseover,mouseover,mouseout,mouseleave
2017-03-14 10:20 664Jquery mouseenter() vs mouseove ... -
css:flex布局
2017-03-13 17:43 958A Complete Guide to Flexbox htt ... -
网站页面配色
2017-01-05 10:12 693导航栏,菜单栏 左侧菜单 导航,底部,选择列表 ... -
BootstrapCSS之Select
2016-10-18 17:00 1103效果图: 代码: <!-- Inclu ... -
CSS样式之带边框的 Anchor(超链接)
2016-10-08 15:19 2921效果图: HTML: <a c ... -
bootstrap css之响应式导航栏
2016-08-29 16:58 16782- 使用 Twitter Bootstrap 3 创建响应式导 ... -
CSS之 white-space : pre
2016-06-15 10:21 1012在 github 的代码浏览页面,可以看到这样的 css 样式 ... -
CSS - li 元素显示在一行____ a 元素没有下横线
2016-05-27 20:44 2224原文链接: http://www.w3schools.com/ ... -
CSS - table 圆角 border radius
2016-04-29 12:08 4568效果: 代码: <!DOCTYPE htm ... -
[css - hr ] border color 横线高度和颜色
2016-04-28 10:59 3734如果设定 hr 的 border,会发现其高度会比不设置高2倍 ...
相关推荐
标题中的"css3-progress-bar-linear-color.zip"表明这是一个关于CSS3线性进度条颜色效果的资源包。在网页设计中,进度条是一个常见的元素,用于显示任务或过程的完成度。CSS3是CSS(层叠样式表)的第三个主要版本,...
在本项目“Html5炫酷进度条-html5-css3-progress-bar”中,我们将探讨如何利用这两种技术来创建一个既实用又具有视觉吸引力的进度条组件。 HTML5的`<progress>`元素是用于显示任意任务的进度的标准化方式。它为用户...
在这个例子中,`progress-bar-container` 是进度条的外框,而 `progress-bar` 表示当前完成的进度,初始宽度设置为50%,代表进度条已完成一半。 接下来,我们使用CSS3来美化这个进度条。首先,给容器添加背景颜色和...
1. **线性渐变(Linear Gradient)**:在CSS3中,我们可以使用`background-image: linear-gradient()`属性创建线性渐变。通过指定起点和终点,以及中间的颜色和位置,我们可以定制出不同方向和颜色变化的渐变效果。...
1. **渐变(Gradients)**:iOS8加载条通常使用线性渐变来呈现背景,这可以通过CSS3的`linear-gradient`属性实现。例如,可以设置一个从浅灰色到深灰色的水平渐变。 2. **伪元素(Pseudo-elements)**:使用`:...
这里有两个主要的div元素:`.circle-progress`是容器,`.progress-bar`是实际的进度条部分。 接下来,我们需要为这些元素添加样式。首先,为`.circle-progress`设置基本样式,使其呈现圆形: ```css .circle-...
在这个例子中,`.progress-bar`是进度条容器,`.progress`是实际的进度填充部分。我们可以使用CSS3来定义它们的样式: ```css .progress-bar { width: 100%; height: 20px; background-color: #f1f1f1; border-...
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进度条代码”涉及到HTML5的`<progress>`元素、CSS3的渐变和伪元素以及JavaScript或jQuery来控制进度。通过这些技术的结合,开发者可以为用户提供一个美观且功能完备的进度条,提升用户...
iOS进度条的特色是具有条纹效果,这可以通过CSS3的`linear-gradient`实现。这里的渐变从左到右分为两部分:一部分保持背景色,另一部分使用稍浅的颜色,以产生条纹视觉。 4. **进度动画**: 为了实现动态加载...
这里,`::-webkit-progress-bar`是进度条的容器,而`::-webkit-progress-value`则是实际的进度部分。通过`transition`属性,我们为进度值的宽度变化添加了一个平滑的动画效果。 **进度百分比显示** 要显示进度...
总结起来,HTML5的`<progress>`标签与CSS3的渐变和动画特性结合,能够创建出美观且具有动态效果的进度条。这不仅可以提升用户界面的视觉吸引力,还能提供更好的用户体验。在实际开发中,掌握这些技巧对于提升网站或...
这里的`.progress-bar`是进度条容器,`.progress`则是表示当前进度的部分。 接下来,我们将使用CSS3来定义这个进度条的样式。为了实现背景颜色渐变,我们可以这样设置`.progress`的背景: ```css .progress { ...
background-image: linear-gradient(to right, #4caf50, #4caf50 50%, #ccc 50%); background-size: 200% 100%; animation: gradientMove 2s ease infinite; } @keyframes gradientMove { 0% { background-...
animation: progress-bar-fill 2s linear forwards; } ``` 这里的`2s`是动画持续时间,`linear`是速度曲线(匀速),`forwards`确保动画结束后保持最后一帧的状态。 此外,为了使进度条更美观,我们还可以利用CSS...
CSS3支持两种类型的渐变:线性渐变(linear-gradient)和径向渐变(radial-gradient)。在这个特效中,我们将主要使用线性渐变来创建颜色过渡的效果。 线性渐变的基本语法如下: ```css background: linear-...
例如,我们可以使用`linear-gradient()`函数定义一个从一种颜色到另一种颜色的渐变,使进度条看起来更加生动和吸引人。 ```css .progress-bar { background-image: linear-gradient(to right, red, orange, yellow...
在前端开发中,CSS3(层叠样式表第三版)为网页设计提供了许多新的特性和增强功能,其中之一就是实现各种自定义的进度条效果。"CSS3多种不同颜色进度条.zip"这个压缩包可能包含了一系列示例,展示了如何利用CSS3来...