做前端的时候难免会遇到这样一个问题，运营或产品需要实现下面这样一个需求
20161111.png
这是我们公司双11推出的一个抽奖活动页面，大家请看我红色箭头所指的区域，它其实是一个gif动画，见下图
闪烁.gif
大家一看就明白了吧，这类似我们小时候玩老虎机的时候最外面那个闪烁的灯，作为前端该怎么在页面上实现呢？有两种解决方法
- 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的讲解结束，有时间的话会出一篇讲解径向渐变的文章，希望大家再前端的道路上越走越远。（不好意思，关于前面提到的整个背景抽奖动画，目前还没完成，等完成之后再附上，夜已深，狼人快出来活动吧！）
网友评论