CSS3 线性渐变应用

2024年5月25日 108次阅读 来源: Yorolling

CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径向渐变）。而我们今天主要是通过一个小例子来针对线性渐变来剖析其具体的用法。

今天的例子就是用CSS3 的线性渐变制作一个大致的针孔注射器。

首先来看一下最终效果，例子比较简单，主要应用到的就是CSS3里的 linear-gradient。

http://jsbin.com/vecujedubu/edit?output

看完Demo，我们首先来看一下HTML结构。

<!-- 注射器父容器 -->
<div class="injector_wrap">
    <!-- 注射器的针管 -->
    <div class="injector__box">
        <!-- 注射器橡胶塞 -->
        <div class="injector__hat">
            <!-- 注射器的推柄 -->
            <div class="injector__handle">
            </div>
            <!-- 注射器的推柄 -->
        </div>
        <!-- 注射器橡胶塞 -->
    </div>
    <!-- 注射器的针管 -->
</div>
<!-- 注射器父容器 -->

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(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //老式语法书写规则

-webkit-gradient 是 webkit 引擎对渐变的实现参数，一共有五个。

  1. 第一个参数表示渐变类型（type），可以是 linear（线性渐变）或者 radial（径向渐变）。

  2. 第二个参数和第三个参数，都是一对值，分别表示渐变起点和终点。这对值可以用坐标形式表示，也可以用关键值表示，比如 left top（左上角）和left bottom（左下角）。

  3. 第四个和第五个参数，分别是两个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([<point> || <angle>,]? <stop>, <stop> [, <stop>]);

-webkit-linear-gradient 有三个参数。

  1. 第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。

  2. 第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。

在标准实现中，取消了from、to、color-stop等函数，开发人员只需定义渐变起点或者渐变轴角度以及渐变的色值即可实现渐变。

注意：渐变起点和渐变轴角度不可同时设置，这样会引起CSS解析错误，无法达到预期效果。

戚戚然不知所言，到这里算是收尾了。本篇算是个不折不扣的标题党，并没有去分析FF、Opera以及IE下的CSS渐变实现。截至目前为止，FF、Opera的实现和Webkit的新版实现基本保持一致，唯一的问题则是IE，历史版本和新版本的IE各有其实现，有兴趣的话可以去查找相关资料学习参考一下。

参考资料:

  1. linear-gradient

    原文作者：Yorolling
    原文地址: https://segmentfault.com/a/1190000005639035
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞