25.尚硅谷_css3_线性渐变-光斑动画.wmv原创

来看一眼，再看一下最后一个线性界面的实例，叫光斑动画，好看一下这个动画应该怎么做啊，看大家有没有事故啊，我先把这个动画打开。好，来看一下这个的话应该怎么做。是不是里面就有个光斑啊，是不是想想这个光斑怎么玩？反正你知道这个光斑在动，调整的是什么。位置，背景的位置是不是有这个光斑，其实是个背景。是不是那看一下这个光斑啊。停看这这个光斑啊，看一下这个光斑它有一个什么特点。除了鞋子还有什么特点什么的渐变？从灰到白的见面吗？应该是透明的界面，是不是是旁边是不透明的，不旁边是透明的，慢慢的不透明了，这边又透明了，是不是，是不是一个透明度的界面，而且还有一件事情，大家看这个光斑是不是只在文字里面。

哎，说明我们说这种光斑只在文字里面吧，说明是不是文字外的背景都要剪掉的，哪个属性WiFi什么。Background光的是不是，首先为什么text的时候是不是会把文字外的背景全部剪掉的，有讲那其实就很好做了，是不是？首先我们画一个背景，这个背景是一个渐变。渐变类型的一个背景，是不是我们说背渐变是个图片嘛，相当于你就把这个光盘看看成看成这张图片是不？这个图片是我们自己画的而已，不要U我化了懂不懂，然后我们调整这个光斑的光的，其次他的光的应该为。

是不是这样的，OK，而且大家看这个光斑是不是对于这个文字来讲的，所以这个背景是不是应该给这个文字的容器的，能理解好，那去设计一下是不是啊，OK，来看一下，我们来做个光斑动画，CTRLCCTRLV05。光斑动画。光斑。斑光斑。动画OK，好，来看一下，整理容器应该不用了，是不是OK？脚本暂时也先不要了是吧？好，这些东西都不要了，滚动角还是给他进了，OK来看一下，嗯，我给个奇艺吧，好，嗯，什么鬼。OK，来一个一是不是好，He里面比如说我来个字叫什么at硅谷是不是OK。

好，上硅谷走你是吧，然后怎么办？先把这个爱奇的样式先写一写吧，好爱奇艺好看一下这个东西现在哪，首先这像这一块这个差实在太远了吧，是不是怎么办？颜色应该是灰色的，看了应该是狗哥是不是走你。灰色的吧，OK，整体的背景是黑的，那来一个。白的黑的是吧。九点是的，然后这个字稍微大一点吧，OK，来一个放给个50P行高。不用给是吧，给个微软雅黑走你。

不够大。麻石加粗。啊行好，来看一下这点是不是这样的，OK，然后呢，那居中吧，而且我们说这个背景是不是待会要给爱奇艺的背景啊。是吧，而且你看这背景怎么出来，是不是从他的头开始出来的，说明我应该让爱奇艺这个元素去做。而不是简简单单的。文本居中应该是这个元素居中，这个元素现在宽度为多少？嗯，自己的话。奇艺是个快元素，宽度应该是不是跟丝口一样是吧，看一下嘛。他嘛是吧，F12看一下。你看这个I7在哪边，是不是在这边是不是啊，OK，那怎么办。怎么办？我们说这款要让你居中，其实居中很好做，待会让你text等啊，真可是他只管文字或者行列块啊。说出它的display display变成in拉block，这点看能不能居中。

举重了是吧，而且是这个元素举重。你看爱奇这个元素居中了，这能不能理解啊？OK，然后怎么办，画光斑？是不是OK，总感觉这个写个小小写的好看一点。是吧，OK，光盘怎么画？把光盘画出来吧，那上面的话最好来一个马吧，马拓给个50稍微下来一顶在上面有点难受，是不是OK，这个时候大家看现在是不是应该给他画，画慢了怎么画？爱奇艺，来个什么光的吗？给什么线性的渐变吗？这个界面怎么画？

白色的嘛，就是透明的，不透明嘛，是吧，是上来应该什么RGBA应该是个是是吧，000是什么意思？五是不OK，从你开始嘛，一开始是不透明的是不是好，然后呢。一个逗号是不是，然后把这个颜色慢慢的变成透明的是不是唯一是不是？呃，从不透明的变成不从透明的变成不透明的吧，是吧，我说这光斑也是有大小的吧，他这个光斑的大小给多合适一点，给个30好，然后呢，再把它变成。透明的吧，CTRL。

是不这啊，那这个这个这个这个要不要给。要给值啊，你要有渐变的是吧，给到60你后面都是不透明的是吧，OK，看这个光盘有没有出来。嗯。出来了。可是它默认是啊。从上往下的嘛，是吧，改变一个角度吧，角度应该多少度吧。度吧，现那是不是这样的，是光盘有点小了，给大一点，这边应该是一百二是吧，看一下这个光麦。还是？不管了。梁白。差不多是吧，在那个光是不是就出来了，问题是你现在干嘛，我们说这个背景应该怎么办呢，叫杠YY什么。

光什么K应该为T1都没有提示的。是吧，这看一下。什么鬼啊，吓我一跳，文字没有透明吗？又是文字没透明吗？这文字还得是透明的吗？是不是color干嘛，Color好像还不是黑色，Color应该是RGBA是吧，0000.3看一下。光在这效果。那个旁边的文字为什么没了？

然后首先我们想想，为什么这个旁边的颜色我是黑色透明啊，背景是黑是不是啊，对对对对。我不是的，我是。GR是不是好看一下这个东西的值是吧，CTRLC直接给它贴过来。这个color吧，是吧，是不是color OK，来一个点三是吧，啊啊哎，吓我一跳，来揍你。什么鬼，为什么还是没有啊？总感觉怪怪的，看他的颜色。

他有吗？爱奇艺是什么？玻璃底色是黑的吧，爱奇艺呢？有颜色吗？他的文字咋来的？白色的啊，白色的我灰色还不行哦。是不是？白色吧，白色吧，白色多少，2525525是不是灰色，因为被什么跟这个哪边。是不是可以了，不对劲啊，那我刚刚是不是可以的，灰色应该可以的，是我缺个封号吧。

可以可以可以，是不是只是我缺一个什么还是给什么啊，是不是这样的，OK，然后他干嘛，这个光盘怎么感觉那么亮啊。是不是光有点亮吧？80。应该是。一百六是不是那个光盘特别小。小一点嘛，是吧，光斑呢，小小一点，然后让它什么倾斜一点吧，这个光斑其实倾斜一点这个面积就小了是吧，OK，怎么再斜一点F12。过来让这个光斑斜一点嘛，是我们现在给的是90啊，让这个光斑斜一点。

光搬斜一点。啊，应该可以。差不多是吧，把这个值我们稍微调一调，看什么时候能调到最优。嗯。再大一点。一百三吧，是不是，那这个稍微也给大一点看，一百三的话，这边给他多少。给到两百六吗？啊，这光盘太大了，给。两百八这个呢，给到100万，稍微小一点看。

差不多的光吧，是吧，好，那我们就用就用这个值吧。CTRLC啊贴过来，调试完了就往再往里面贴，不要傻乎乎的。调试完了直接把浏览器关了啊，OK，来看一下整理光盘是不是有了是不是。好，点上这个光斑动起来吧，怎么动起来调整他的什么。光的是不是OK，来看一下那怎么调整。首先我们来稍微简单一点的，我们说干嘛在我爱奇艺后位上去的时候吧，是不是我来调整你的什么。Background什么？是不是调X轴上面的是吧，给个正子还是给个负杂，让他慢慢往前。正直吧，是不是应该往前走多少？咱不管了，走个500肯定出去了，是不是OK，走个500块钱。

另外一个是不是就零二是不是来看一下，那现在干嘛，我们说他应该有个什么全三给个。三秒来看一下是不是刷一下这里。绝对因为那个用百分比。来看一下为什么这样呢？写的有点大了，是不是还是这个光斑的问题吧，是不是，反正他已经出来了光吧，是吧，而且他看这个光斑是不是，你看后面还有个光盘。是不是说明这个光斑是不是干嘛叠的，为什么这个光斑是叠的。为什么现在有两个光斑吗？很明显有两个光斑吧，大家现在看你看这边一个光斑，这边一个光斑吧，我明显有两个光斑吧，为什么两个光斑，就是因为你白黑光的什么。

Repeat的应该是什么？光repeat应该什么啊，没有repeat，我们说你这个渐变是个图片啊，相当于啊，属性都可以用的，只你刷一下。后面还有光斑吗？没有光斑了是不是？只不过斜的位置有点大了是不是啊，把这个位置调一调。F12斜的位置有点大了，把这个位置调掉。差不多。这是90度的时候，是不是就正好是竖着的，OK，肯定要稍微斜一点的是吧，斜成一百一吧。

不对劲，是不是看一下我们之前这个效果，看哪边有问题，看一下我们之前的效果。C3里面这个UI方案，看这个光盘动画。能看出哪边有问题吗？你看能看到能我们这边什么。中，我们这个光班好二啊，是不是我们这个光光好二啊，这个光完全是写的吧，我们这个光什么鬼？就是一个能不能看出来。我看他的光盘怎么定义的。

120度。一样的我们的度数干嘛？110度嘛，零。他这边是不是有个100哦，我知道了，我们是。它是有起始值的，是不是我们其实把这个光斑定义定义成什么了。你看我们这个光斑是干嘛，是不是从这个点上出来的，效果不是很好吧，我们给这个光斑干嘛，一开始也也来个什么70的点吧，五来个100PX吧，是不是。后边也是一百八吧，是不是这边呢，260，是不是这边呢，这边这个度数调成一百二吧，这时候再来看看光斑的效果应该会好，稍微好一点，哎，稍微好一点嘛，是不是因为你一开始没有从这个头上出来嘛，是不是这样的光斑效果是不是就稍微大。

好一点了，可是我们看他的整个光盘是怎么玩的，自己在动吧，啊这个应该你你们应该会做了。是吧，而且你发现这个光斑是不是干嘛只有一个的，为什么只有一个，一个白光等于no逼的吧，而且那光斑是不是从头从头上开始出来的。你没发现这光芒是从头上面开始出来的吧？想一想，这，那我们应该怎么做？我们说还能用home吗？不能火了，还需要全赛星吗？不需要了，应该用J，应该什么用JS来写了，套路应该跟我们刚刚写这个话的能一样。是吧，OK，这你把这个加S给它拎过来好，这个加应该怎么写，我是不是去拿到这个什么奇一啊是吧，CTRLC拿这个奇一。

直接去拿什么爱奇艺就可以了，是不是OK，然后这个flag呢，这个flag其实就是改造了什么。改这个吧，是不是这个应该怎么办，改他的。发光的。他在一起是吧，这个值应该是慢慢的变大还是变小变大的吧，所说不要符号是不？我们之前给的多少500吧是吧，那我再稍微再给大一点吧，那你这个弗flag克等于900的时候，再把你这个flag给支回来。可不可以啊，那不就是一样的吗？是不是这样就行了？试试呗，试试就试试，卡卡卡卡卡卡了。有报错，In is not半啊，In呢，改成he。

为什么是太慢了？呃，这个速度是不是太慢了，38。啊，这个背景太慢了吧，那flag应该加等于多少十吧。是不是就快了，可是跑的太远了吧，可是反正他是从这个头上出来的。不是从头上出来的，是不是，你想他从头从头上出来的话，其实你这个默认应该什么，应该复制啊，这个副子应该跟你光斑一样长是吧，你的光斑有多长100到两百六吗。一百六吧，是你这个应该多上来该是负的160，一百六是不是走点是不是这哪来看一眼走。

来看一下，这应该等于负的160，是不是应该把它制成负的160，这里看一下，说一下这里。来看这个我们从来是不是从这个头上出来了，现在我让他跑跑这边跑的太远了吧，让他稍微跑近一点，跑个600左右就已经差不多了，这里。哎，整个光盘动画是不是就出来了，能没讲啊，这个是不是让你要对这个渐变要比较的。了解，而且对这个back光的操作的话也要比较熟悉吧，因为讲啊这讲了一个光斑动画。