摘要:分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向,是从上到下是从左到右,如果定义成,那就是从左上角到右下角。
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径向渐变)。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。
今天的例子就是用CSS3 的线性渐变制作一个大致的针孔注射器。
首先来看一下最终效果,例子比较简单,主要应用到的就是CSS3里的 linear-gradient。
http://jsbin.com/vecujedubu/edit?output
看完Demo,我们首先来看一下HTML结构。
CSS 部分
.injector_wrap{ width: 200px; margin: 120px auto 0; } .injector__box{ background: -webkit-linear-gradient(45deg ,#ccc,#ecf0f1,#CCC); background : -webkit-gradient(linear,left center,right center, from(#ccc) , color-stop(0.5,#ecf0f1) , to(#CCC) ); width: 40px; height: 180px; position: relative; } .injector__box::before{ position: absolute; content: " "; left: 15px; width: 10px; height: 30px; background: -webkit-linear-gradient(left ,#ccc,#ecf0f1,#CCC); background : -webkit-gradient(linear,left center,right center,from(#ccc),color-stop(0.5,#ecf0f1),to(#ccc)); bottom: 100%; } .water{ width: 100%; position: absolute; top: 0; bottom: 20px; background-color: #62d2e2; } .water::before{ position: absolute; content: " "; width: 10px; background-color: #62d2e2; top: -30px; height: 30px; left: 15px; } .injector__hat{ transition: all ease 0.6s ; position: absolute; width: 100%; height: 20px; background: -webkit-linear-gradient(left ,#282E33,#5D5D5D,#282E33); background:-webkit-gradient(linear,left center,right center,from(#282e33), color-stop(0.5,#5d5d5d), to(#282e33)); bottom: 0px; -webkit-animation: autoPushWater 3s linear 0s infinite; -o-animation: autoPushWater 3s linear 0s infinite; animation: autoPushWater 3s linear 0s infinite; } .injector__hat::before{ position: absolute; content: " "; width: 0; height: 0; border-left : 20px dashed transparent; border-right : 20px dashed transparent; border-bottom : 15px solid #2c3e50; bottom: 100%; } .injector__handle{ position: absolute; content: " "; left: 10px; width: 20px; height: 180px; background-color: #c0392b; background:-webkit-gradient(linear,left center,right center, from(#80261c),color-stop(0.5,#c0392b), to(#420600)); background: -webkit-linear-gradient(left ,#80261C,#c0392b,#420600); top: 100%; } .injector__handle::after{ position: absolute; content: " "; left: -20px; width: 60px; height: 4px; background:-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600)); background: -webkit-linear-gradient(left ,#80261C,#c0392b,#420600); top: 100%; } @-webkit-keyframes autoPushWater { from {bottom: 0 } 50%{bottom:144px;} to {bottom: 0px; } } @-o-keyframes autoPushWater { from {bottom: 0 } 50%{bottom:144px;} to {bottom: 0px; } } @-moz-keyframes autoPushWater { from {bottom: 0 } 50%{bottom:144px;} to {bottom: 0px; } } @keyframes autoPushWater { from {bottom: 0 } 50%{bottom:144px;} to {bottom: 0px; } }
CSS部分其实也蛮简单的,其他部分不说了,相信都可以看懂是什么意思、有什么用。我们就把这次的核心内容linear-gradient 拿出来多带带分析一下。
细心的小伙伴应该会发现,在CSS中linear-gradient 出现了两种方式,都是webkit前缀的。其实两者都是Webkit内核对于linear-gradient的实现,只不过一个是早期实现-webkit-gradient,一个是修改后的参照标准的实现-webkit-linear-gradient。
首先我们来分析一下早期实现-webkit-gradient.
-webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600)); // 原始语法 -webkit-gradient(, [, ]?, [, ]? [, ]*) //老式语法书写规则
-webkit-gradient 是 webkit 引擎对渐变的实现参数,一共有五个。
第一个参数表示渐变类型(type),可以是 linear(线性渐变)或者 radial(径向渐变)。
第二个参数和第三个参数,都是一对值,分别表示渐变起点和终点。这对值可以用坐标形式表示,也可以用关键值表示,比如 left top(左上角)和left bottom(左下角)。
第四个和第五个参数,分别是两个color-stop函数。color-stop 函数接受两个参数,第一个表示渐变的位置,0为起点,0.5为中点,1为结束点;第二个表示该点的颜色。
如果color-stop第一个参数是0或者1的话,那么可以使用from或者to来代替,from、to 只有1个参数——色值。from(hex) 效果上等于 color-stop(0,hex),而 to(hex) 等同于 color-stop(1,hex)。
所以上面例子中的代码可以修改为。
-webkit-gradient(linear,left center,right center,color-stop(0,#80261c), color-stop(0.5,#c0392b), color-stop(1,#420600)); -webkit-gradient(linear,left center,right center,from(#80261c), color-stop(0.5,#c0392b), to(#420600));
在WebKit的-webkit-linear-gradient()中不能同时设置位置和角度。可以通过设置颜色中间点达到相同的效果。即如果设置了 left top 和 渐变轴角度的话会导致CSS解析错误,无法达到预期效果。
接下来是Webkit按照标准实现的渐变-webkit-linear-gradient。
-webkit-linear-gradient(left,#80261C,#c0392b,#420600); // 原始语法 -webkit-linear-gradient([|| ,]? , [, ]);
-webkit-linear-gradient 有三个参数。
第一个参数表示线性渐变的方向,top 是从上到下、left 是从左到右,如果定义成 left top,那就是从左上角到右下角。
第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数,表示多种颜色的渐变。
在标准实现中,取消了from、to、color-stop等函数,开发人员只需定义渐变起点或者渐变轴角度以及渐变的色值即可实现渐变。
注意:渐变起点和渐变轴角度不可同时设置,这样会引起CSS解析错误,无法达到预期效果。
戚戚然不知所言,到这里算是收尾了。本篇算是个不折不扣的标题党,并没有去分析FF、Opera以及IE下的CSS渐变实现。截至目前为止,FF、Opera的实现和Webkit的新版实现基本保持一致,唯一的问题则是IE,历史版本和新版本的IE各有其实现,有兴趣的话可以去查找相关资料学习参考一下。
参考资料:
linear-gradient
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115291.html
摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...
摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...
阅读 1556·2021-11-22 15:33
阅读 1683·2021-11-15 18:01
阅读 580·2021-10-09 09:43
阅读 2568·2021-09-22 16:03
阅读 717·2021-09-03 10:28
阅读 3524·2021-08-11 10:22
阅读 2671·2019-08-30 15:54
阅读 1737·2019-08-30 14:21