23.尚硅谷_css3_线性渐变.wmv原创

好，我们来看啊，好，我刚刚已经把这个背景全部讲完了，是不是OK啊，刚刚背景的话，其实里面坑还是蛮多的，特别是这个白花就行啊，好多人一直在用这个白花position，行，可是他永远都不会知道这个百分比到底成，到底谁的，为什么，因为他懒，不去看文档懂不懂，看一眼文档就什么知道的事情懂不懂，可是在很多人眼里，这个事情他们就不知道懂不懂，要有好的学习方法，要干嘛胜过一切啊，OK，还有一个就是该方当什么，他基本上啊，以及这几个词到底是一个什么样的关系啊，都搞清楚好，那接下来我们来讲一个啊，C3新增UI样式里面啊，最最。这最后的一个东西啊，最后的一个东西好看，叫线性渐变，OK，好线性渐变，记住渐变渐变。是一张图片，这句话给我积极死渐变，不是颜色，是图片。能不能理解，OK，不要看到一起吗？不要看到现在，比如说马要我给你看个界面，比如说干嘛我们做的发廊，发廊看这个。

很多人都会认为渐变是颜色。是一个什么开光的color，切记，渐变式图片。看见没？哎呦，这什么HTM刷一下啊，这个是看不到的啊，可能记住这个东西是给光卖用的啊，所以说讲渐变之前给我记住一句话，渐变式图片类型。啊，OK，好看着。好，我们来讲最后一个东西界面好，那界面这一块啊，搞一个文件夹吧，东西比较多。好，今天的最后一样啊，过渡今天应该是讲不到了啊，OK，渐变，好，那这个渐变最终我们要做一个公斑动画。啊，这个光斑的话，用过IPHONE4S或者说IPHONE4的同学应该经常见，开机的时候就有这种光斑的话，你点那个划分的时候，还没点的时候，是不是就有这种光斑动画是不是啊OK。

好好，那做这个功位的话，其实也蛮难的，好我们来看一下，好必须你对这个渐变一定得掌握了，OK，好来看一下第一个啊，我们来个零一啊好界面分两种，一种叫线性渐变，一种叫镜象界变啊零一与线性渐变的初次邂逅，好这里与线性。啊，就是线性渐变吧，或者那些幺蛾的线性渐变是不是不邂逅了渐变？OK，来看一下信息渐变啊，我们说信渐变是个什么？渐变是个什么鬼啊，图片啊，OK，比如说干嘛我来一个style。好，写个规则零，OK，然后我们说给这个test吧，好，一样啊，还是盒子。

OK，给个边框吧。实心好，所以你看它在哪。是不是在这一块啊，好看一下啊，放到这一块总感觉稍微有点难受啊，马上下位置做摇图吧，啊，这么举重一下行吧，是不是啊，OK，来看一下这么举动很简单，来看线性渐变啊，我们说渐变是一个图片类型，所以说backgroundone什么面是不是？OK，来一个渐变，不来ul了，来个渐变，OK，线性渐变式的函数来看一下Lina什么grent啊，只有你这什么。Lina归是不是渐变，渐变是不是两个颜色之间的渐变啊，比如说从红色渐变到绿色是不是G啊，眼红配对。的，来看一下这什么红的绿的一个什么渐变吧，OK，好，记住渐变啊，就是你要看这种背景啊，单位就是渐变，这里面有几种颜色，红色跟绿色。

有几个渐变，一个渐变啊，渐变是必须是两两种颜色之间的关系啊，就是一个渐变红到。绿的渐变有两种颜色，能理解啊，OK，那这个叫。这叫什么渐变，线性渐变是不是好？其实这个还有个名字叫什么双双颜色值的渐变，还有多颜色是的渐变，比如说当中再来一个绿道粉。绿豆粉，看是不是。红到绿绿豆粉啊，这里面有几种渐变，两个渐变，红到绿的渐变，绿豆粉的渐变，是不是其实用黄颜色是最最好看的。

嗯。W增大。你看这个渐变就很明显了，你看红到黄的渐变，黄到绿的渐变，两种渐变能解OK，好好，这个叫多子渐变，是不是OK，可是现在看渐变的方向是不是就这样。是不是垂直方向上面一个渐变码，那这个渐变的方向能不能控制呢？可以控制的OK，默认是从上到下发生渐变，怎么改变渐变的方向？Top波left right吧，加一个to也是什么？这个函数的第一个参数。是不是可以吃个兔啊，是不是，你看我们的兔兔什么意思啊，到底不去嘛，你看是不是红到绿，你看我说那你到底不去嘛，比如说到右边，哎，减HT吧，走你那是不是就去右边。能不讲OK，这个你方向是可以进行控制啊，啊，这个自己去控制好，还有什么使用角度，现在我们是不是只有四个方向，那最好是不是可以使用角度，使用角度不要再拖啊。

就直接拿什么角度就行了，对不对，可是渐变这里面这个角度啊，这张图是我画的啊，所有点错啊，可是界面里面这个坐标系就是就是长这样的。等等，45度就往这个方向看一下，好，我们说前端啊，C里面写度数是第一级这点。你看是不是红到绿啊是吧，45度嘛，你看45度是干嘛，就往这个方向了，负45度是往这个方向的，来看一下。负的45度整理就是吧，这块能不理解啊，如果你写一个逆时器一直在控制这个方向，其实这个动画也蛮好玩的。一。行，不让我改。

看这个动画。OK，是不是这个字啊，你看这个字啊，你看。啊，你就可以做一下这种动画了，其实改的就是这个什么度数，这里面讲写个是定时器是不是就可以了。这这个会不会写，这应该会写吗？会不会定时器里面干嘛，你设置一个值嘛，你让这个值一直加加码，那这个动画不就出来了吗？是不是OK。好，再来看，好这说渐变的方向吧，再看界面里面还有什么好改变界面的方向，使用角度是不是都已经讲了，好再讲一个怎么控制啊颜色的。分布什么叫控制烟？颜色图吧，比如说我这边来个90度。90度看是一个什么样的，嗯，零度吧。那或者说把这个宽度改宽一点，改成600，这个改成200，就让它是90度好，90度是往这个方向的嘛，是吧，你看好这其实后面是可以跟P值或者说跟百分比的，好，我们来看一下怎么跟百分比。

好，10%代表什么？来看一下。是红的占10%吗？不是，从10%这个位置开始渐变，前面是什么颜色，前面你第一个颜色，什么颜色就是什么颜色，相当于有10%的纯色。啊，不是橙色，橙色。纯红色能不解，就前面这10%纯红色从10%这个位置开始进行渐变，能不理解啊，OK，比如说干嘛我说渐变到百分之，也就百分之到百分之是红的黄的界点，20%到百分之是。

黄道绿的一个渐变，是不是那十往后呢。纯绿色啊，因为后面没有了吗？你看前面没有是纯红色，后面没有是纯绿色，能不理解OK。好。我们再来，好，那我们再来一个界面啊，我来考考大家看一下零二。这种界面它会变成什么样子，好比如说。嗯，这个渐变啊是不是啊，嗯，现在是10%的话，我那边写PX啊。你完全可以写P，这到30PX是不来看一下是不是前10PX是一个橙色，10PX到20PX是一个红道黄的界面，然后是黄道绿的一个界面，然后这个度是什么绿色啊是不是啊来我来考一下大家啊，比如说把这个稍微给大一点，100。

到200这个到300是吧，这也没问题啊是吧，前面100都是我是的水色嘛，是吧，那想想比如说我那我这么写的。他觉得这是一个什么鬼。我就这样想，或者说我这个绿色我先不要。这这个是什么，最终应该是一个什么样子。这应该是什么样子？两边肯定是纯色，红跟黄的有没有渐变色，没有渐变色也就是两个颜色区块，是不是因为你没有让我发生渐变，是不是，比如说给个110，那就有一个十像素的渐变色。这里面理解啊，OK，好，那我们再来说一个什么好，其实透明度它也是有渐变的，我们来看一下透明度的渐变啊，透明度渐变其实比较好看这里。

好，怎么样的渐变呢？好比如这个红色，我让它变成一个透明色rgba吧，比如说是0000吧，那是不是就是一个透明色，是不是OK，那这个yellow呢。Rgba一个透明色吧，不管了，这里应该有这种颜色。是不是啊，OK。给个300吧，让他有个200的渐变嘛，是不是前面应该都是透明的。前面都应该是透明的是不是，你看从哪边开始啊，100PX差不多这边。慢慢开始渐变了，渐变到哪300PX差不多是这边后面都是纯色。

是这样的，透明度有没有渐变？透明度没有渐变啊，透明度也渐变对不讲，那比如说这个一模一样的颜色呢。一那就。透明度的渐变吗？是不是没有透明度呢？透明度上没有渐变的，那全黑的，那么你讲OK，好，这是我们讲的什么，这叫透明度，它是有渐变的，是不是OK，还有一个叫重复渐变，什么叫重复渐变，大家看。CTRLC，再来一个零三好，大家看我们现在这个界面，好，这个现在界面大家看我们只用了界面区域占占多少。这边去这边去站。界面区域占多少？界面区域真的很少，100PS开始。多多300片停。

只有这么多是界面了吧，其他两个都是填充的一头一尾的纯色，是不是我想让它有一个重复的界面，怎么做？重复的界面前面加一个。Repeating。看一下行不行。是不是一个重重不了解不，你看这是不是算一套。这是不是算一套，是不是后面是不是干嘛，后面是你看这是这是尾巴嘛，所以说后面是不是用头部的来来称啊，称满后面这个区啊，前面你看这边是不是头啊，那前面是不是拿什么。尾部的东西来来称啊，因为这是头嘛，这是尾嘛。是不是你尾巴后面不是要接头的吗？这个头前面不应该接什么尾巴的吗？是不是，所以最好我们说写这边的时候话，最好前面这个字干嘛。你不要给他指定。是不是这给他子你看那就是个嘛，两个嘛，是吧，因为嘛，总共是600嘛。

应该是零到300平嘛，是一个渐变码。这里面你讲那不就什么两个渐变色吗。这里面有任何的纯色吗？有吗？没有的，有没有讲好，那这是做的一个嘛，重复渐变，这叫什么渐变，这叫线性渐变，懂不懂，待会我们会用线性界面来做两个东西，一个叫做画廊灯。放的灯嘛，是不是另外来做个什么光斑。动画。好，要做这样东西啊，首先先思考一下这两样东西你有没有思路啊，下一节课我们把这两样东西给他做了啊，大家先下课啊，会。