资讯专栏INFORMATION COLUMN

CSS3 线性渐变应用

Snailclimb / 2552人阅读

摘要:分为线性渐变和径向渐变。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。今天的例子就是用的线性渐变制作一个大致的针孔注射器。第一个参数表示线性渐变的方向,是从上到下是从左到右,如果定义成,那就是从左上角到右下角。

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

相关文章

  • CSS3-线性渐变

    摘要:兼容性见参考二线性渐变渐变线通过函数可以创建线性渐变图片。线性渐变是通过一个轴定义的,这个轴称为渐变线。等价等价等价等价等价等价等价等价并且和直接距离为,不会渐变,如下图参考线性渐变 一、渐变(gradient) 1.1 关于渐变 渐变表示从一种颜色平滑的过度到另一种颜色。它是图片类型的一种,但是渐变类型图片没有尺寸,也没有长宽比。它的尺寸取决于被应用的场景,比如作为元素的背景图片时,...

    piglei 评论0 收藏0
  • 浅探css3渐变

    摘要:基本用法想要知道线性渐变有什么用,当然要先学习它的属性和用法。下面我们先一起学习一下线性渐变的属性。函数的第一个参数是角度或者方向,第二个参数是截止颜色的值,要想产生渐变的效果,当然至少要两个或者两个以上的颜色值。 css3的渐变属性已经在各种网页设计中被广泛使用,在没有css3的渐变属性之前,要实现一些多种颜色切换的效果图,你可能别无他法,只能用一个图片来显示,虽然你知道使用图片需要...

    lieeps 评论0 收藏0
  • css3 渐变

    摘要:渐变渐变分为两种渐变,一种是线性渐变,一种是径向渐变线性渐变线性渐变为向上,向下,向左,向右两种渐变方式。线性渐变由一个轴即梯度线构成。 css3ps: css越来越真正的像一门语言了,css已经有变量了,刚刚看到文档中。一个实验性质的功能。 渐变 渐变分为两种渐变,一种是线性渐变,一种是径向渐变 线性渐变 线性渐变为向上,向下,向左,向右两种渐变方式。 linear-gradient...

    FrozenMap 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...

    bang590 评论0 收藏0
  • [译]HTML&CSS Lesson7: 设置背景和渐变

    摘要:属性值则依赖于我们需要创建什么样的渐变背景,例如线性渐变或放射性渐变。我们会在线性渐变中介绍不同种类的供应商前缀,但为了简便起见,放射性渐变中我们不会再提及。线性渐变多年来,设计师和开发者们都是通过切图来实现渐变背景。 背景对网站的设计有重大的影响。它有利于建立网站的整体感觉,设置分组,分配优先级,对网站的可用性也有相当大的影响。 在CSS中,元素的背景可以是一个纯色,一张图,一个渐变...

    jk_v1 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<