24.尚硅谷_css3_线性渐变-发廊灯.wmv原创

做两个线行渐变的实例啊，好，大家看啊，今天我们这个过渡肯定是讲不到了啊，过渡后来明天去讲啊，整个我们C3里面这么多内容，是不是从明天开始啊，一定要注意力集中了，这四块东西一块都不能落。咱们讲这两块东西比较重要啊，新的UI方案里面，总体的来讲，这块东西的重要性肯定要比他们低一点，咱们讲因为里面都是些API，我们做出什么一些小的DEMO知是那从明天开始，所有的东西都是为我们后面的项目做准备的啊，在我这个阶段，我需要大家去必须把你页面技术全部掌握了，怎么画PC页面，怎么画一在页面，在我这个阶段啊，你要把它全部掌握了，懂不懂啊，我这个阶段还有一个比较重要的任务就什么。要把你们JS的能力提上来啊，所以到我这个阶段结束，首先画任何页面都不能虚了，其次啊，对这个JS要搞得透透的，懂不懂，然后啊要会一些构建的什么的啊，这个我们放到之后说，然后你们再去上框架懂不懂，前端就两个东西画页面处理出去。

懂吗？我这个阶段教你们怎么画页面啊，怎么去把这个HTCSGS更友好的去组织好啊，这是我的任务啊，还有一个就是说要把你们这个GS能力一定要提上来啊，在我这个阶段我都需要去做，我这个阶段一过就是no。然后是然后了。那这个是服务端的一些东西啊，就是一些什么成熟的框架了。董少啊，可能我还会给你们跟还会给你们去加点东西，那我们放到什么后期再说，董导就说现在你们把精力放到怎么去画好页面，怎么去理解好GS上面啊，告诉大家这个GS你们可能还没掌握好啊，说实话GS到现在只是懂了at而已，懂不懂GS真的比较厚的东西我要放在后面再去讲啊，所以说你们不要做其他事情，先把你手上的东西给大家么弄弄好啊来再来看我们在UR方案这一块，我们说刚刚讲的一个线点，对吧，看两个DEMO，第一个是。

那个发廊灯吧，是不是先用这个发廊灯，你看到这个发廊灯的话，你有些什么思路吗。首先他后上去的时候它会动。是不是待会我们做个竖的，一般放的都是竖的是不是啊，这个横的不好看，待会做个竖的，反正上去它会动。是不是会动，大家想想啊，其实就是个藏减法，为什么能动啊，说明其实你这个东西这是不是有个包括区啊，里面是不是应该有个更长的东西。然后你后背上去之后拉着他跑诶。是不是等等好，那就好做了，怎么做？你看我这边其实就是用了的嘛，我也不用定位。我救护车的就行了，来看一下怎么做。好，我们来做一个。

放廊灯零四好放廊放浪灯是不啊啊，果然是班级人比较少啊，一般说的放蓝灯下面男孩子都炸了，好看一下，来个did，来个ID是什么外是不是里面再来个did叫做什么卡拉吧，叫做。阴了是不是啊，好，反正这个是个包裹区，这个是什么？这个是真正的灯是不啊好来调。好行马in干掉pen干掉是不是好，我们说给这个外是一个包裹区啊，这个外区包裹区啊，记住我现在一直在叫包裹区这个概念啊，OK来看一下，我们说来个外省，这个外小一点吧，40PS。来个来个300篇，OK，先给他个边框。

一实心的是吧，我可以看到在哪。好，是不是在这边啊，我让他移到。中间来是不是那简单一点嘛，方上下为零，左右凹凸好。移过来了，让他在离上面稍微的远一点，100PX这里下来了。是在哪啊好，现在里面是不是应该有盏灯哦，好，那就是什么，我wi的里面是不是有一个什么直接的儿子叫做阴囊，是不是我们给他来一个什么。我说你的Y是不是就拿到它的负体的是不是，是不是他只要指定他的就行了，它的下为。多少呢？反正量比他大，是不是600吧，是你的两倍，OK，找你好，比如说现在你是不是滚头条了啊，这滚头条不太友好了怎么办？进掉怎么进滚条STEM怎么办？为百分半W为hidden。

整音尽掉它是不是啊，好来看一下，那现在比如说这个区域给它一个背景发个光，OK平是不是啊，好的是是不是在这块啊好，那出来的时候overflow overlow为是不是找你好，其实是什么？其实它是有的是不是，那大家看现在这里面是不是。你觉得用三下测试画这种黑白黑白是不是我们先不要考这个斜的，我们先我们先不考虑吧，你把黑白黑白是干嘛，这个背景给他画出来吧，是不是，要么你让UI做个背景图，黑白黑白相间的背景图是不是，可是我们说这个背景我是自己有能力去画的。换一个黑白相间的吗？是吧，那怎么画，不就是他应该有个白光的吗？不过你这个白光那干吗不是拼了，应该是个什么。

线性的渐变吗？是不是问题？是黑白相间的吗？怎么画信个黑的？你不废话，来，我们来来。来咱们来看一下，我们说默认情况，你看这个方向是不是这样的是不是，那上面出来是不是应该有个黑的，这一个白的是不是啊，那是不是上面就应该是个黑的是不是，可是问你你有没有看到渐变。有渐变吗？没有渐变吗？我们说虽然说我们这个叫做渐变，那我能不能让他只有纯色没有渐变可以的吧，我说上来是不是卡是吧，然后呢。要什么要要。

纯色有没有？纯色有了吧，这个就有了，这不啥都没有吗？这应该是我写错了，看看有没有划掉，看看样式有没有写错，就看看有没有划掉，划掉了吧。需要两个颜色吧，是不是用逗号隔开来这个颜色吧？第二个颜色应该指什么？啊，该框呢，是图片啊，可是我不是用的是一个简写属性吗？啊，其实我没有用UR吗？确实应该用该框是吗？一麦点是吧？是其实用该光的干嘛也行，看他一不画掉吗。化掉的话应该是应该试试。还是坏掉了是吧，OK，是不是必须你这边必须得两个颜色啊，那第二个颜色什么颜色行吗。

我就问你行不行？外层后面这个字给多少？给十是不是好？确实能出现一段黑影，该白怎么整P的R1。是不，他是不是看看。是他重复。咋重复啊，这个怎么重复，想想这个你看我没有没有。默认不就是从上往下是不是。咋重复啊，你这个。你这个压根没有渐变的呀。重复啥？我们说这个重复，重复的是渐变吧，你有现在你有颜色的渐变吗。

没有，你就前面一段黑的，下面都是白。1010PX嘛，前面一段线段下面都是白的，你能这么干吗？不能这么干，肯定不能这么干是不是啊。想想能理解为什么不能这么干吗？你在这边又重复问你重复是什么，还会重复这种纯色吗？纯的黑色吗？不会重复的了，上是不重复你的渐变，你识别到你有渐变吗？没有渐变啊，比如说你这边给个二都可吗。是有重复，那重复的是渐变颜色。是不是能不能理解啊，不能这么干。是不是也就是说我这个东西必须得是个节点。是不是想怎么做？这么玩吗？一开始吗？是不是这个渐变黑到黑的渐变码，你能拿我怎么办？

是不是看一下我黑黑的黑的界面吧，管我。是不是干嘛，我干嘛。到什么二吗？这个这个是个什么见面能我能这么写吗？不能这样就会出现见面了，我要都是纯真了，这从开始是到哪。白到白界面吗？是不是问你现在你看到的是不是两个界面，一个是零到十的黑色界面，比如说先把它换成粉色。一个是粉到粉的啊。渐变是不是为什么后面都是粉色，因为没了吗？是不是这个时候问你后面是什么？纯色了，比如说我来个白对么？那且it t上比如说个嘛，我说这边也是20片是吧，是不是，你看这边不是都是白的嘛，这的问你讲也就问你现在你看到的这两张颜色是不是渐变色。

是界面色，不是纯色，是黑到黑的渐变，粉到粉的界面。有没有讲，所以说现在你再去repeating有没有作用啊，有，因为我repeating的时候只管渐变色。能不理解，好也是这边干嘛，R1。At是不是他走，你怎么老是那么多？来看一下。哎，出来没有，不要把这个粉给我换成。来。来。是不是可以了？那没解，就差一个什么角度了吧，这个边框难看干嘛？边框给他干掉。干掉更难看，边框干掉更难看怎么办？

我看我之前怎么做的。之前怎么做的好看一点，怎么感觉，你们觉得这个好看吗？感觉怪怪的，看看我看过之前拿的斜过来啊啊，斜过来就好看了，是不是啊，好，这么写啊。前面来一个角度吧，这个角度自己算了算，看怎么玩。自己调。你要我们干嘛的是吧，哦。我要干嘛呢，好挑。是不是调到哪个，喜欢干嘛就停吧。这行不行啊，我不，我走过来。

差不多吧，应该是这样的吧，135左右，应该是吧，你算自己算这个角度，不不不那个。不要这么干，这种角度没有，做开发的时候为了算一个角度，算半天的上来滑十人给我转知不道。啊，怎么喜欢怎么转啊，这边应该画什么，135度。完美放了灯是出来了是吧，这个灯不转了，这个灯是不是得转起来，那怎么办啊，其实我说这个如果没有的，你们看你们看到应该是看见没有，是不是都在下面的等着上来了怎么办？上去呗，怎么上去啊，在你外卡后面时候干嘛。把把谁把这个阴了，那这个阴了往上怎么办。

我没有定位啊，马给错我一个复制吗？那你付远一点到哪300是不是正好是冲的程度吗？负300吗？这时走你上来。动了一下啊，要有一个动画怎么办？给谁我就问你给谁，谁在动。给外发还给这个音呢，应该给这个音呢是吧，给他来个什么全我让你两秒钟干嘛。太快了，是不是三秒钟三秒差不多。可以了，是不是啊，差不多了，你们讲OK，走，你现在我们说，可是它是不是只能动一次啊，是不是正常放向它是不是一直在动的，那怎么办。

怎么办？是不是画一个什么，难道谁啊，难道这个你了吧？一般怎么拿到这个音了。叫什么？有没用过他，快去找谁。不就是他选择题直接拎过来是不是这里面填的是什么选择器吧，是不是OK，只有你找到他OK，然后呢。怎么办，一直动怎么办？循环嘛，一面跟function好，我让你干嘛，一直段是不是我先给个我先给个。这个全身你还需要吗？全身就不用了，是不是因为我用JS来实现动画了，是不是OK，怎么办？改变它的什么，他的掉点什么。

马等于多负的300P，这样行不行？首先我来看看周年。脚本就报错了干嘛？市场咋啦啊？看他在哪，现在已经动了，你看他的style里面是不是马班，应该已经是负320。可是我让他怎么。一下子过去了吧，你不可能啊，外面一定要有个什么变量的，是不是flag吧，等于零进来这个flag干嘛，每次进来这个flag加加，只你flag加加是不是OK，我让你一直这个什么负的。

加PX是不是来看一下这里啊，这个动画机器的卡一秒动一动，一秒动一动，一秒动一动是不是OK，怎么办，100毫秒。还是短30就30吧，这里啊，你要看动画的效果，体验最好的话，其实这个定时器应该要给一秒钟让人接受60次，那是多少？不对不对，一秒钟这里面是好秒吧，是不是也就一秒钟是1000除以60啊，这个效果应该会稍微好一点。是不是稍微好点吧，可是你发现来我让你走，看见没有，他得回去吧，怎么办？判断业这个什么那个干嘛，如果等等于负三的时候怎么办？

啊，等于300啊，因为我这个是加加的这边复合在这边是不等于300，应该得到是不是看这效果你。完美一直在是不是是不是出来了，老大，你们不信再再转会啊，你们其实吧，看着这个就行了，你看到付300啪的一下去领了。看见没有啊，你们能捕捉到这个过程吗？超人啊，是不是？OK，来看一下，其实他应该有一顿的，顿了一下是不是看。对一下是不是它是会对下的，是不是那最好的，那我们现在就让它对一下好吧，这个其他方案我放在什么这个来讲啊，OK，那这个是方向灯应该什么算做完了是吧？OK。

好，其实想想啊，这个放到最后来优化吧，我们讲项目的时候其实会讲很多话，OK。