CSS渐变之linear-gradient

做前端的时候难免会遇到这样一个问题，运营或产品需要实现下面这样一个需求

20161111.png

这是我们公司双11推出的一个抽奖活动页面，大家请看我红色箭头所指的区域，它其实是一个gif动画，见下图

闪烁.gif

大家一看就明白了吧，这类似我们小时候玩xxx的时候最外面那个闪烁的灯，作为前端该怎么在页面上实现呢？有两种解决方法

• gif图片，下下策

• css3动画，最优解

那么css3动画和我们今天讲的这个linear-gradient貌似没什么关系啊，虽说两者都是css3的特性？其实我想说的是如果用css3动画实现，那么他的背景颜色该怎么实现呢？对，如果用单纯的颜色肯定不满足需求，所以一定要用线性渐变，下面先附上用线性渐变做的背景（还没加上动画，最后会附上实现整个效果的图片）

light-box-bg.png

虽说更设计还是有点差别，主要是我没问他们用的渐变是从什么角度开始的，渐变颜色是什么，但是我觉得我用css3实现的效果充当背景应该是没问题的（不一定要和设计一模一样，该变通的时候要学会变通，毕竟决定权在我们手上）。我实现该效果的css3代码如下：

.lottery-box {    position: relative;    width: 8.133333rem;    height: 8.133333rem;    margin: -0.013333rem auto 0 auto;    padding: 0.533333rem;    /*background: url(../image/light-box.gif) no-repeat 0 0 / cover;*/
    background: linear-gradient(180deg, #f2ac39, #d73141);    border-radius: 20px;    box-sizing: border-box;
}.lottery {    display: block;    width: 7.066667rem;    height: 7.066667rem;    background: #321c7e;    padding: 0.066667rem;    border-radius: 10px;    box-sizing: border-box;
}

看了之后是不是觉得很简单，但是还没完，我充其量只是把效果实现了出来，其实线性渐变还有很多值得我们注意的地方，还等什么，继续往下看吧，相信你一定会受益匪浅。

1.语法

这里我只说w3c标准的写法，添加相应的前缀来实现兼容，这里补充下因为我开发过程中用了gulp，自动帮我编译less文件并添加前缀，着实省了我不少事情，要是纯手写估计要吐血，希望各个浏览器厂商早日实现css3写法统一，不统一就意味着被淘汰。

linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ );

这个是MDN上定义的linear-gradient的写法，这里我会重点讲解每个参数的含义并带有例子。

2.渐变中点 渐变角度 渐变线 起始点 终点

这几个概念是我在学习渐变的过程中总结出来的，希望大家先把这几个概念理解透，这样学习起来就很容易的，先来一张图。

linear-gradient.png

• 渐变中点：这个很好理解就是div的中心，任何渐变包括径向渐变都是以它为基准进行变换

• 渐变角度（angle）：就是语法中的第一个参数，如果把div看成一个时钟，12点方向对应0deg，3点钟方向对应90deg，6点钟方向对应180deg，9点钟方向 对应270deg（请注意这个角度指的不是渐变的从此处开始，而是从此处结束，其实我也不知道怎么表达，看完下面两段代码，大家就应该明白了）。

.box3 {  width: 200px;  height: 200px;  border: 1px solid red;  background: linear-gradient(0deg, #fff, #000);
}

按照我们通常的思维应该就是颜色从上往下由白色到黑色，下面是效果图：

demo01.png

效果与我们想的完全相反，angle为0deg表示由180deg向0deg渐变，渐变颜色由白到黑，所以容器底部是白色，顶部是黑色。最后渐变角度如果没有写，默认值是180deg即从上往下渐变。

• 渐变线：其实理解了渐变中心，渐变线是很好理解的。默认的渐变线是垂直于容器并且过渐变中心的一条直线，然后根据定义的渐变角度以渐变中心进行旋转即可。

• 起始点：起始点是渐变线上代表起始颜色值的点，起始点由渐变线和过容器顶点的垂直线之间的交叉点来决定。

• 终点：终点是渐变线上代表最终颜色值的点，终点是起点关于容器的中心点的反射点。

3.angle

渐变角度，这个上面已经解释了，这里你只要理解为渐变朝你定义的哪个角度结束就可以了。

4.side-or-corner

中文意思是边或角。可选的值有：right | left | bottom | top（它们之间可自由组合）。最新的语法需要前面加to来指向终点方向，所以我这里讲解的都是加了to，这里我列下side-or-corner的取值：

• to top（0deg）

• to right top

• to right （90deg）

• to right bottom

• to bottom（180deg）

• to left bottom

• to left（270deg）

• to left top

共八种取值，除此之外都是无效的值。

5.color-stop

语法为：<color> [ <percentage> | <length> ]，颜色后面要指明长度或百分比。颜色大家应该都知道是什么意思，但是这个百分比或者长度指的是什么呢？
当我们想在一张400*300的div实现在从100,100位置到200，200位置由红色到黄色的渐变，我一开始是这样实现的

.box3 {  width: 400px;  height: 300px;  border: 1px solid red;  background: linear-gradient(135deg, red 100px, yellow 200px);
}

效果是这样子的

linear-gradient2.png

但实际PS里的效果是这样子的

ps.png

仔细一看确实有些出入，我自己做的效果红色部分明显少很多，这是为什呢？
这就是我们要理解的color-stop中的length或percentage。

对于斜向线性渐变，点到点的渐变可不是直接把点的横坐标放上去就可以的。因为当渐变倾斜的时候，渐变的起止点的坐标也发生变化了。下图是官方规范的一张示意图，演示的是135deg渐变的起止点以及方向。

gradient-diagram.png

其实只要计算出黑色括弧和紫色括弧的长度就可以了，数学问题问体育老师去，哈哈。最后我计算出黑色括弧的长度为100 * Math.sqrt(2) = 141.4213562373095，紫色括弧的长度为200 * Math.sqrt(2) = 282.842712474619，最终我将我的css代码改为

.box3 {  width: 400px;  height: 300px;  border: 1px solid red;  background: linear-gradient(135deg, red 141.421356px, yellow 282.842712px);
}

效果变为如下

linear-gradient3.png

PS效果为

ps.png

二者几乎一模一样，大功告成，到此linear-gradient的讲解结束，有时间的话会出一篇讲解径向渐变的文章，希望大家再前端的道路上越走越远。
（不好意思，关于前面提到的整个背景抽奖动画，目前还没完成，等完成之后再附上，夜已深，狼人快出来活动吧！）

作者：蓝瘦额香菇
链接：https://www.jianshu.com/p/99e889773940