00:00
好,那我们继续来上课,那么这节课呢,我再来看一下我们CSS的渐变啊,那么咱们CSS渐变啊叫做garden,那么它可以让你在两个或者多个指定的颜色之间显示平稳的过渡,那么以前呢,咱们必须使用什么图像来实现这个效果,现在呢,咱们可以通过什么,通过代码啊就可以来实现,那么这样可以减少什么,减少我们请求请求和这个节约的带宽啊。因为我们如果要是图片的话,那么每次请求都会浪费掉一些带宽对吧?那我们这如果直接输代码来实现的话,就不会有这样的问题了啊,那咱们来看一下,那么csi定义的这个两种的类型的渐变,一个叫做线性渐变,一个叫做这个镜渐变啊那怎么用呢?咱们来看一个看先看线性渐变啊,线性渐变这里变它有什么,有这些位置,你可以向上向下向左向右对吧,或者对角,那么第一个参数就是它的位置,然后第二参数呢是什么?三的它的起始颜色和它的这个结数颜色啊,那这个线性渐变就是我们现在要用的这些东西,它都是什么,都是以函数的方式对不对?你看都是调用一个函数什么对应的参数,那OK,我们来演示一下啊,来在里边我们去建一个。
01:06
文件。叫做HL,然后15啊叫做渐变。叫做CSS。渐变。好了,那这里边我们来讲一下啊,那么我们先来去了解一下我们的这个线性渐变,比如说这里边叫做BOX1,然后呢,我们先给它设置一下啊,来style然一像素的实的这个蓝色啊,然后给它让它距离上下100像素,然后左右干嘛让它自动好了,那现在我们来看一下啊,在我们的页面中是不是就已经出现了这么一个。块。对吧,那OK,接下来我们开始给它设置渐变,那么渐变大家知道是个颜色对不对,那是颜色的话,那我这里面比如B加入background color是不是就可以,然后呢,给它设置值,设置什么值呢?设置一个叫做under Li。
02:11
Lir,你看我代码啊,看我代码GR是不是都没有提示,哎,GR啊,那么正常我们在不设置任何情况下啊,对于渐变我给了两个颜色,比如说红色跟这个blue啊蓝色进行渐变,那么实际上我们是可以有效果的,但是现在你看可以吗?刷新是不行啊,哎,所以大家注意啊,渐变色不能给color来设置啊,在设置渐变的时候,我们需要去注意的是注意。渐变。不能设置什么呀,不能设置color啊,不能给color设置,那么要给谁设置呢?它的这个子属性是image,你要给image设置才可以啊,杠I,然后这个时候你看这会是不是才有啊,哎,那我给他一个re红色的渐变,再给他一个blue蓝色的渐变,那OK,那现在你再来看,我再来刷新,你看这里面是不是就红蓝的渐变就有了。
03:10
看到了吧,哎,那么一样啊,我不光可以给两个颜色,我可以给更更多啊,比如说GR我给了四个,那现在我们再来看,走你,你看红蓝呃黄绿对吧?哎,甚至我还可以干嘛呢?告诉他我说红色要占50%的位置,对吧,那现在你看再来刷新,你看红色是不是大了,也就是说这个颜色后边我还可以干嘛呢?给他的位置参数看到了吗?比如说这块我让他占20%,我这就已经70%了,对不对,来再走你。诶,你看这个20%跟我们所理解的20是不是就没有那么大呀,哎,不太一样,对不对,哎,如果说要让他占20%,那我这个位置应该是应该是70%啊,是50到70之间,是不是才有20对吧?那OK,走你你看这个时候它才会大啊,这个时候才会大。好了,这就是咱们这个渐变的设置啊,那么渐变的设置光给这两个也不是对吧,那么还能干嘛呢?给他位置拆除那background,那background简写是不是也可以啊,对吧,然后Le。
04:07
Garden,那么这里边我们开始给他位置刹住,比如说我他干嘛呢,现在啊,咱们先来看,比如说我默认就给他两个。一个红一个。Blue一个红一个蓝对吧,一个红一个蓝,在进行进行渐变的时候,哎,怎么没有了blue啊。刷信你看好了一个红跟一个来渐变的时候,默认是什么,从上到下去渐变对不对,那我能不能从下到上呢?也是可以的,对吧?在我不颠倒颜色值的情况下,我想让它从下到上,那么这个时候我可以B加,然后。Doesn,然后在这里边干嘛呢?我让他从下到上对不对,那我直接突呃凸凸什么呢?凸top哎到上对吧,注意中间不需要给它这个符号啊,就直接突突一个这个位置就可以了,就代表了到哪到哪对吧,你到左那就是to left,到右就是突rap啊,那我到上就to top,然后一样是红色跟蓝色,那OK,那现在我们再来看。
05:05
走,你你看红色是不是在下面了,蓝色是不是在上面了,这是不是就是给他to top的效果,那么一样给他to top,我能给to top设置,我还能给什么,比如说我这里边还能给他一个Bo到下,到下就是正常了,对吧?那我换一个到left,那到left是to left对吧?那to left也相当于什么,从右到左吧,你看红色是不是在右边到左看到了吗?哎,这是to left的效果,那么一样能to left,我还能什么to right。IG啊,来刷新,你看是不是to right对吧,红色在左边,然后蓝色在右边,好,包括我们可以这么设置,还可以怎么设置呢?我还可以给它角度啊,B back ground,然后Le garden,对吧,我给它角度,比如说我干嘛呢,我想给它一个0BEG,注意角度啊,因为它是三百一圈嘛,360度嘛,那第一季。第一季是代表度啊,那一样,这要给什么红,给什么颜色红色。
06:00
蓝色啊,还是给这两个,那零第一季也是到顶部了,对不对,零是不是你看啊,我们浏览器正常是这样的。是不是这样的对吧,那比如说一圈一圈,那可能就是这样的,对不对,那00点是不是在这儿啊,对不对,那这不就是从从什么从下到上的这个意思,对不对,到上嘛,对不对,哎,到00点嘛,那你看我的这个红色是是不是在下边啊,来刷新红色在下边蓝色的是不是从下到上,哎,那如果我想干嘛呢?我想给他这个。从上到下呢,那时不就background,然后Le从下到上,那我就该说一百八第一吧,哎,然后让他什么,让他read,然后补录好了,那现在你来看是不是这样了,走你。是不是,哎,包括还可以怎么样,我还可以给它对角线嘛,比如说对角线应该怎么样,那是45度呗,单说。然后继续land这里边,比如说给的45第一季对吧,然后还是一样红的blue。
07:02
走你你看是不是对角线,这是什么,从右上到不对,这这个对,从右上到这个左啊不对,从这个左啊先是红马从左上不对,就是左下啊,从左下是不是到右上啊,这是不是45度对不对,哎,那OK,那一样我能给负45度吗?啊,能不能给负45度,咱们来看啊来走你你看是不是也行啊,负45度是不是从右下到左上了,看到了吗?哎,就说我们可以干嘛,通过这种度数来设置对角线,包括比如说我还能不能设置90度,来你看好了background。干等的,比如说这个90第一九十第1G的话,是不是到右边的那一样,Red blue。那你看是不是到右啊,走你。干是不是从左到右对吧,那如果我想让他干嘛从右到左呢,从右到左90反过来是不是二百七对吧,那二百七第一季你看走你是不是从左到右了。对不对,那从头到尾都注意啊,我能给二百七我也可以干嘛呢,我也可以给他负90也可以啊走你你看是不是没变,哎,这就是给他什么,给他这个角度的设置,当然那么我给这种英文的参数也能设置对角线啊,这里边可以怎么设置background background,然后叫做Le。
08:15
Garden,然后给他设置这个对角线叫什么,叫做这个to to什么呢?To top top什么呢,Top right,哎,就到顶部的右侧,然后呢,红色。蓝色,那现在你看到顶部的,诶,我是不是打错了啊,多打了个P啊,这叫to top啊好了,那到顶部的右侧是不是到这儿从左到右上对吧,左下到右上,那你看是不是这样的,左下到右上。对不对,哎,我能这么设置,那就各种方式四个角我是不是都可以啊,比如说这块我叫做fat,那是Bo do,这是不是就从左上到右下了。对吧,那你看走,你是不从左上到右下,哎,这就是咱们的线性渐变啊,那么包括。我们在写渐变的时候,因为现在这个属性啊,已经很成熟了,所有浏览器都支持,如果所有浏览器不支持,就有一些浏览器是实验性的,比如说你看我这个手势啊。
09:07
CSS3我这个手册呢,它是比较老了啊,那在这里边我们来搜一下叫做什么叫做Li对吧,那你看这里边给你提示什么呀,所有浏览器,这几大浏览器是不是都是实验性质,看到了吗?实验性质如果我们要用的话,就需要怎么办,是不是需要加上浏览器的所有前缀啊,比如说background,然后。Garden啊,我就给他一个红。一个。Blue来对吧,这是默认正常的颜色,没错吧,那么现在好了,那如果说啊。大家注意,如果说我这个其他浏览器都是实验性质的,那我在设置的时候,我需要怎么样来CTRLCV,喂喂喂,我就给它多复制两个啊,多了一个去掉一个好了,那比如说我想要火弧也兼容,那是不是就M-moz杠对不对?哎,这是火弧的,我想要欧鹏也兼容,那是不是就杠O杠。对吧,这是什么欧的,然后我想要这个,呃,苹果的跟谷歌的也都支持那那杠Y8K杠对吧,当然现在我现在这个属性已经都支持了,所以我不需要再设置前缀了,对不对?然后比如说我要那个IE的那杠MS杠对吧?然后剩下的就是正常的这一个,哎,我这么去设置它就可以了,那现在一样,因为本身它已经好使了,随便我再上新它也依然是好使的啊好了,这就是咱们镜像渐变的设置啊,那么一样,镜像渐变我们用的地方啊,还是能用到的,不像这个线性渐变啊,不像镜性渐面,镜像渐变我用的是比较少的,咱们来看啊,比如在这里边我们L。
10:34
On monkey,咱们来看一下monkey这里边。找到一下它这个价格选项法这块,你看啊,这里边它就是用的渐变色,看到了吗?它就用的这个叫什么线性渐渐变啊,那OK,我们也做一下这样的效果,比如说在这里边我直接ec就是井号三对吧,那它这个渐变是怎么来的?来你看好了井号。怎么上来就三呢?三就三吧啊,然后这里面比如说WDTH宽度我们给他200对吧,然后高度我们给他一个100,有这么一个边框了,然后包的一像素实现的红色边框,行就给红色了啊然后这里边我们来看刷新一下,OK,这块有个边框对吧?那么接下来干嘛,我们是要渐变的,那B加UN,然后呢,L l garden对吧,然后呢,一样啊,我这块是干嘛,应该是从左到右吧,所以我to right啊,因为你看引这里边的颜色是不是就是从左从左到右的,哎,所以这里边我用的to right直接到这个右侧对吧?然后接下来干嘛呢?我再给它一些值。
11:38
颜色值,那比如说这里边我直接呃RGB啊,我给RGB是不是也行啊,哎,比如说我们去找一个绿色值吧。来新建一个。画图。这个颜色吧,它就是深绿是吧,来。那就这个十四幺零九十六。
12:02
来十。4109,然后16 OK,这是第一个值,搞定了第二个RGB。再来。再深一点。这个是九六十八十。这里面九六十八十好了,那现在咱们来看啊。这里边我们返回这里刷新。刷新诶怎么没有效果RGB,哎,好了,刚才打错了对吧,那现在我们再来刷新,你看是不是就有这样的一个渐变的效果了,对吧,你看是不是明显两个颜色嘛,对吧?然后同样我可以设置,比如说他要0%对吧,然后他要百百分之百啊那就。这块就是最边上是白的对不对,刷新你看。没什么太大变化对吧,那我如果说把它设置,因为这两个颜色比较贴近啊,把设置50%对吧,后面100%再来刷新,你看这块这个白色明显往往往这边来了,哎,这就是它的这个渐变色啊,当然我们可以去直接获取它的这个渐变颜色值啊,你可以右键去看一下它这两个值是怎么设置的,来从你找到这块内容对吧,往上找它的div。
13:16
你看div里面是不是设置了这两个颜色,但它给的什么?给的是50DG,看到了吗?哎,给的是一个什么,给的是一个角度,对吧?我是直接水平的,所以它这里边角度的话,50DG应该是这么样的一个角度,看没有是不是这样的一个角度,哎,那OK,这就是它设置的这个渐变啊,好了,那这个线性渐变我们知道了,那线性渐变里面还有一个属性啊,叫什么呢?就是我们可以重复的去设置它啊,B叫什么呢?Re repeating under garden这个属性作为了解就可以了,重复的对它进行设置,比如说我要一个re read,然后一样我再来一个blue,好,现在咱们来看啊,我就给了这两个颜色,我们能。能看能不能看出来区别啊,来刷新没什么区别吧,跟我们刚才用的是不是一样,但是如果说在这你看,比如说我给他限定一个20%,这个呢,我让他40%好了,那么接下来你看好了,我再来刷新,你看好了它是不是就一半一半一半半,诶到10%完事,接下来又二百分之四十看到了吗?诶,这就是咱们的这个重复渐变啊,这个呢,作为了解一下就可以了啊,这个用的比较少啊,线性渐变我们还是可以用到的啊,好了,这是咱们的渐变,那么线性渐变我们了解过后以后我们再来看什么呢?
14:31
然后这里边来井号BOX2,我们再来看一下,我们的叫做线性渐变啊,线不对,叫镜像,刚才是线性对吧,这个叫镜像。渐变镜像渐变的参数啊,就比较多啊,正向渐变参数比较多,来咱们看一下,你看在这里边这是镜像渐变对吧,那么镜像渐变效果怎么样呢?是不是这样的一个效果,哎,那么在这里边一样。你看了啊,这里有什么呢?有它的这个位置对吧,然后有它的形状,有它的大小,然后加上它的颜色,看到了吗?如果说我前面,比如说我什么都不需要,我直接给他一个background background,然后来一个叫做记。
15:11
呃,GG。GRG。RR不是RGI,对ID啊,好了,这就是咱们的镜像渐变,那么线,呃,对镜像渐变啊,我一样给它两个颜色,一个叫红,别别红了来换一个叫blue跟佳音绿色,好了,我用这两个颜色做这个镜像渐变,我们来看效果什么样的来刷新。没给他设置什么,没给他设置样子对吧?来with宽度一样200对吧,然后高度也一样200,然后BA不需要了,那现在宽杆只要有了渐变颜色就出来了,你看是不是中间是蓝色,然后向外圈去去扩散对吧,也就是说默认它的位置是不是以中心,中心点是不是以中间为主啊。对不对?哎,那OK,那么咱们来看啊,现在我的宽高给的是相同的,所以我们看到这个形状它是什么?是不是一个圆形的渐变,那么如果宽高不同的来,你看好了,如果是二百一百的情况下啊,宽高不相等的时走,你你看这是什么?这是不是就是个椭圆形的渐变了,哎,实际上它默认是一个椭圆形的,默认是一个椭圆形的啊,那么如果我想给它圆形怎么办?那我就可以在这里面继续加这个属性,CR cle,这是不是圆形,那OK,来。
16:23
走理,你看这是不是就圆了,哎,这就是咱们的这个叫什么,这个镜像渐变啊,那么包括这里边我可以给这个,比如说我要想干嘛呢,我想让他干嘛,比如我让它居中,对吧,我不居中了,我说给他吧,我先让他一个CT center啊,咱们来看默认的它本来就是居中的,所以我们给他center没什么效果,而且注意啊,我给了center以后是不是都没了。我把这个调整一下啊,变成还变成二百二百啊,然后呢,我让它Mar上下100左右自动。走,你。看好了啊,是不是没有了,我要把那边框打出来吧,起码我们能知道这个标签是存在的,对不对,现在好像标签不存在一样啊来瑞。
17:07
刷新好了,在这儿呢,看到了吗?哎,没有颜色的就没添加进去,我给这个center它就不好使,那么在给位置的时候必须要加什么,加上一个at,加上一个at啊,那么现在再来看走你你看是不是就好使了?哎,当我给center center的时候表什么意思?表示它水平跟垂直都是什么?以中心点对吧,居中的位置,那么同样我能不能换了,比如说我at top。呃,应该左侧,呃,这个水平位置left top是不是从顶部啊,那现在你来看啊。走你啊,是不是从顶部开始进行渐变的效果是不是类似于我们现在那个线性渐变一样啊,哎,那么一样啊,我能这样的话,我也能什么right,比如right button Bo。走你你看是不是从这开始对不对,哎,同样能给这个我也可以干嘛呢,也可以给像素和百分比,比如说我说从50像素,然后这个呢,也从50像素开始,那我们再来看。
18:04
走你你看是不是从五这个最难的这个位置,是不是从50像素开始往外扩散的,看到了吗?哎,这就是咱们这个爱的,那能给他也能干嘛,比如说我要给他三十百分之三十和40%的位置。好,那现在我们再来看周理,你看是不是又往下放了,哎,这就是咱们的这个。镜像渐变。啊,那OK,它可以给这个位置参数啊,还可以干嘛,是不还可以给形状对吧,刚才我们也。也测试了对吧,那给形状怎么给,直接空格给就可以了啊,比给CR cle,我让他干嘛,它变成圆形,那这个时候来走你。走你走你,诶圆形不好使是吧,C cle,我给它往前放啊。来,我让它形状往前放,你看好不好使啊,我只是把位置挪了一下对不对?来刷新,哎,这回好使了,看到了吗?哎,是个圆,但是这个圆因为我们也看不出来,因为我这个位置给的也不一样,对吧?那换个椭圆呢,比如说C啊,不是叫elip啊,先给这个圆来再来走你。
19:08
能看出什么变化吗?好像也看不出来什么变化对不对,哎,因为这里边我们并没有给他什么,并没有给它加大小,所以我们看的效果是不一样的啊,那么这里边咱们一样,我先给大家记一下吧啊。这里边。我们的第一个参数叫什么中心对吧,中心啊用的用什么用at来设置啊,At一个什么center center是不是水平,两个水平的位置对吧?哎,两个位置相同的话可以给一个啊那么语法。直接是艾特,艾特一个X一个YY是不是这个意思,哎,而且大家记住啊,都是从左上角的对不对,如果我从零百分之零开始的话,那这个时候你来看啊,来走,你是不是从这块这个点开始的对不对,哎,所以它的点都是从左下角为准的啊,然后这个X跟YXY可以什么,可以是像素,也可以是百分比啊OK,这是中心,那么中心完事之后就还有什么,还有它的形状的嘛,形状形状这里面只支持两个,一个叫做e Li这什么呀,这就叫做椭圆啊,也是默认值,然后还有一个c rle,这个叫圆。
20:15
这叫圆啊OK,然后接下来什么,接下来是不是它的大小了,对吧,那这里边再来叫做大小啊,大小呢,它有这么几个,一个叫做最近边。最近边。最近边啊,然后还有这个最远边,最近边最远边以及最近角和最圆。角啊,这个最远边跟最远角它俩的效果跟我们现在看的效果是一样的啊,这就是这样效果就放到最远处,那么你看最近边什么样的啊,首先最近边我们用的叫做C-seti。Set set setid,然后最远边呢,那就是这个A-ID那同样最近角那就是C杠角Co,然后最圆角那就是杠Co ner OK,那么我们挨个来设置一下啊,比如说现在最近D翻过来来CTRLC,你看啊,它在我现在是用的是椭圆对吗?那你看它在我这里边来走你。
21:29
你看没有效果了,对吧,来我们把它切换一下啊,不是切换换成一个圆吧,来叫做这个哦,我从零开始了,说啥的别不要最远的,我要这个这个这个这个不是不要这个椭圆,我要圆啊叫cle OK。让它变成圆,然后呢,我这块也变从零了啊,我远一点吧,从20从20OK,那现在我们再来看刷新,你看是不是从20的这个位置,哎,有一个蓝色开始往外发了,对不对,那OK,这是最近的,那最远边呢,最远边就跟我们默认效果是一样,就刚才看到那效果就是一样的,它就开始发到最远处来走,你看到了吗?哎,就开始在进行什么扩散啊,那OK,这是边,那么有边也有角,那最近角跟我们这个最近边效果是一样的,你看好了啊,走你。
22:19
刷新看到了吧,是不是也是这样效果,哎,这块有一个小圆啊,那么最圆角就跟这个最圆边是一样的了啊来。到最远的角嘛,刷新你看是不是这样的,哎,这就是咱们这个镜像渐变啊,这个呢,作为了解就可以了,我们用的不多,用的不多啊好,那继续我们再往下来,那渐变我们了解以后,接下来我们再来看什么呢?再来看一下我们的这个。换啊,叫做transform转换,那么转换呢有两种,一种叫做二转换,一种叫做三换,那么二转换里边有四个值,有四个式可以嘛呢,可以进行旋转、缩放、移动和倾斜,看到了吧,这里边我说了CSN中的转换是干嘛允许我们对元素进行这四种操作,那么它会分为2D和3D的转换,那么在CS32的时代,如果要做一些图片转换,角度都是依赖于什么图片,或者是flash,或者加上scriptscript才能完成,但现在我们借助CS3就可以轻松的实现这些功能啊,那么而且呢,我们通过这个CS3CSS变形可以让元素生成什么静态视觉的效果,但也很容易,这个,但也可以很容易的结合什么CS3的这个,这个东西和这个东西这里还没讲呢啊,就是动画会产生一些动画的效果啊。
23:31
好了,那咱们来看这里边,咱说一共有四种方式对吧,分别是什么。分别是移动啊,然后呢,这个旋转,呃,这个缩放啊,旋转和倾斜啊,那这里边咱们来看这四个值,移动旋转对吧,然后缩放和倾斜这四个值啊,这四个东西都是函数,都是函数啊,这几个都是函数,那么你看它的书写格式,什么川冒号加上函数名,后面开始给什么给X值和Y值,好,那OK,我们来一个一个用一下啊,首先先看这个移动吧,移动这个函数啊,这里边叫做。
24:10
嗯。这里啊。新建一个HTM文件,那么叫做十。六对吧,那么接下来我们学的是转换。转换。好了,那么转换有2D跟3D对吧?我们先来看转换2D啊,转换2D2D就是平面的,3D就是立体的,对不对,哎,转换一个2D的啊,那么转换2D好,这里边我们先用一下叫什么呢?叫做这个ec selection,井号叫BOX1 OK,那么一样,在这里边我们先对它进行一个设置style标签,然后井号BOX1,然后这里边我们给他一个这个给,比如说给他200像素,He也给他200像素,对吧?然后呢,在这里面BACGRND,我们给它用了这个线性页面,给它分成一个,呃,不要红色,要一个黄色和一个黄绿吧。
25:07
Grren,黄跟绿做一个渐变颜色对吧?好了,那现在咱们来看我在这里边是不是就有这么一个大块了,对吧?那么接下来我开始进行对它进行移动,那怎么移动呢?这里边直接是看了transform,然后后面是什么叫做translator。好了,这是不是有translator哎,它有transl X和translator y对吧,那就简写的直接translator,那如果你要用translator的话,你就要给他什么这两个值吧,那比如说X我让它干嘛十项数对吧,Y呢,我也让它十项数好了,那现在我再来看啊,你看好了,我刷新一次它就能动啊,来刷新。看到再动了吧,再刷肯定不好使了,为什么?因为它已经移动到这儿来了嘛,对不对啊,已经移动到一次了啊,那么它一样,它能正直也能负值啊,能往右右下也能往左上,那左上是不是就是负值啊,对不对,那么在这里边一般我们不会直接给这个元素去用,而是干嘛呢,都给它们加尾类分之一对吧,冒号how,就当鼠标移动啊,就有一些事件的时候,我们才会干嘛呢?才会去使用这些。
26:08
属性啊,比如说这回我用这个单单独设置吧,来translator-X对吧,干嘛呢?比如说我水平位置,我按照这个负十像数。对吧,然后再往后translator-Y垂直位置呢,我让它变成正的30像素,好,那现在我们再来看啊,再来刷新,刷新完你看看它没有动对吗?鼠标移动,你看它是不是在走啊,诶垂直是往下来水平,水平是不是向左边再再去走水平我给它复制看到了吧,哎,这是我们单独来设置,那么一样咱们也可以干嘛,在这边也可以对它进行这个。直接来设置对吧,直接给的,比如说我给他一个这个20PX,那你再来看,我来刷新啊,鼠标放你看放诶少吧,我是不是只给了一个对吧,我需要干嘛,我是不是需要给两个才可以啊,哎,这个如果我设置的这个是要就是设置呃,Translator函数的话,我需要给两个值,对吧?如果只给一个值,只代表水平位置看到了吧,那OK,那现在咱们再来看啊,这里边还有一个特效,我们也可以去做。
27:14
比如说啊在这个。就比如说这个Java里面吧,我点击进到Java这个页面,Java页面里面,你看有个老师介绍你看啊,我鼠标一放上来,看到了吗?一放上来。看下面啊,下面还有一层阴影,有点阴影效果对吧,你看诶是不是有点辛苦,阴影效果,整个这个这个元素是不是向上去移动了,那OK,那比如说这里边我们也做这么一个效果啊e select井号BOX2对吧,然后在这里边我们需要去设置井号BOX2。冒号WTH,比如宽度依然是200对吧,然后高度呢,可能高一些he,比如给它400,然后在这里边B加个ground,我还是给它渐变色吧,啊,我就不往里面添东西了,Land garden,然后yellow,然后GR green,好了,那现在我们先来看我们的页面啊。
28:04
转换2D这里是不是在这儿呢?哎,我给他移动走啊,我让他。移动一遍,来妈。上下为100左右,自动让它到页面居中的位置上来,过来了啊,过来以后咱们说了鼠标放上去它会往上移动,对吧?往上移动完以后是不是还加个阴影啊,所以在这里边,那怎么设置井号BOX2冒号后,然后当鼠标移动上来以后,我让它transform t transform里边的translator,我只需要向上移动,是不是水平位置我就不需要了,对不对?如果我用的是trans,我就不需要,我就给它加一个零,做一个位,对吧?那垂直呢?垂直是不是向上,那比如说负负的负10PX,那么当移动完以后,我是不是还要加一个阴影,叫做fo-sa。Sa塞对吧,然后这里边我们需要干嘛,我们需要去给它设置这么几个值吧,那比如说0PX0PX,我就给它设置个外延,外延值吧,啊3PX3PX,然后什么颜色,九号CCC,九号CCCC好了,那现在我们来看啊,来刷新,你看鼠标放看到了吗?鼠标放。
29:09
是不是就有了?看到了吧,哎。看到了吧,哎,这就是咱们这个效果的制作,你看它这里边是不是也一样,我放啊放。没错吧,哎,你看放。是不是就往上移动大约十像数对吧,只是怎么样,只是它移动的会比较慢,它有一个过渡的效果,但现在过渡的属性呢,我们还没学对吧,那我可以给它加一下,比如说这里边。啊,叫做川。然后。呃。A。所有的属性。所有的属性,或者我就直接穿穿TS。LA,然后让他三秒完成。三秒二太长了,一秒吧。现在咱们来看啊,返回来,我不没讲那个属性啊,你不用管它是什么啊来。
30:02
有变化吗?有变化吗?好像。跟我们刚才那个差不多是吧,没没有什么变化对吧。OK,我看啊,我我写的对不对啊。TS,我我用A所有的简单粗暴,然后三秒。还是让这些长一点好刷新。诶,看到了吗?这三秒时间有点太长了是吧,来少点吧,两秒吧。刷新一下走你。看到了吧,是不是有了,哎,同样比如说我一秒再小点一秒。再来刷新啊,你看到了吗。啊,是不是在慢呢?哎,那当然一秒也也有点慢,那比如说我点五什么意思,是不是0.5秒,哎,0.5秒给我完成这个过渡效果,那你再走,你看到了吗?哎,这个差不多了对吧?哎,或者我可以再小,比如说我直接点二都行,对吧,点二,哎只要我们看着舒服,点几都可以,对不对,你看周一,哎这回差不多了对吧,不像刚才那样,那么太直了啊,不要刚才太直了啊,那么一样,人家这里边我们也可以干嘛给他设置一下这个。
31:11
左偏移,比如说我让它三让它三对吧,内置的为零。对吧,这是一个阴影吧,然后再来fo fo杠。然后。我让它下边有那这块对吧,然后垂直让它往下边的话。呃,左三不对,我应这应该让它右边有了这块就是负3PX,然后这个就变成0P还是3PX吧,然后零外延值。外延值不需要就删掉了啊,直接给他3PS模糊度什么意思,就是我设置它那三条边啊,因为它顶上是不是没有啊。对不对,刷新你看。他这饼上是始终没有的啊。但我这个设置的就不是对呀,不对呀,宝贝儿。给一个3333,然后这回再来刷新。
32:03
走你啊,这边有了对吧,但是我的右边是没有,因为咱们再去设置的时候,只能设置两边,那他这个设置的时候肯定是给其他的标签能设置了啊你看。你看他这个。这都有啊,看到了吗?哎,我们可以看一下右键查看什么,查看这个元素,看它是怎么来给它设置的,那找到这个元素。然后我来找到它最大的这个元素,这是它最大的元素,再boxx-sa,看到了吗?零零啊,这是0.75,然后一点它给的是这个re em对吧?然后再往后rgba给的是这个颜色值,看到了吗?啊,它只给了一个什么?只给了一个垂直的啊,只给了一个垂直的,然后MARIN8给30。嗯,你看我把它注册掉。诶,好。啊,他应该是给两个标签设置了,不是给一个再往上来。你可以挨个来找,你看他从哪个里边设置什么设置了这个塞啊,哪个里面设置塞了,这里边有一个我们找到了,对吧?啊这里面呢,这里边。
33:08
有没有?这里面就没有了。这里面没有了对吧,那就只哎,那它也是只给了这一个啊,只给这一个设置了一个这个focus sa,但是只给这一个就不对啊,为什么不对,因为你看我把它注册掉了,注册掉以后它还有什么,你看它还有看到了吗?是不是还有这个效果啊。哎,所以他应该是给了两个均匀设置的啊,两个一个应该是重叠的这么一个东西来设置,不然的话,他不可能这个能做出三边有,而只有上面一边没有的,对不对?哎,那OK好了,这个了解一下就可以了啊,那等我们需要做的时候呢,我们再去研究它啊,那OK,这个完事以后。好穿这个完事以后我们再来看下一个啊,那下一个叫什么呢?叫做这个。Rotate啊,它是干嘛呢?是做旋转的对不对,哎,旋转的话干嘛可以也一样允许有负值对吧?元素将逆时针旋转它的单位,因为它是旋转角度,所以它以第一啊是单位是度的单位啊代表了旋转的角度,那OK那么一样,在这里边我们继续,比如说这里边我给它一个selection井号,叫做BOX3,然后呢,在这里边我们进行BOX3的设置啊井号BOX3,然后冒号好啊不用。
34:21
先给它设置正常的wi给他200,然后he也给他200,那么接下来我们要旋转对吧,那gn Mar上下为100左右自动OK,那么这个设置完以后,接下来咱们来看啊,井号box。井号BOX3冒号号,我直接给号了啊,然后在这里面transform,然后开始去给,给什么呢?给它的旋转叫做。啊,Rotate rotate。啊。啊,Rotate好了,那你旋转多少呢?比如说我旋转这个,呃,30BG啊30度对吧,这里边只注意旋转的时候只支持一个参数啊,只需要一个参数,那再来看我来点击刷新一下啊,现在我这块诶我的原。
35:12
元素啊,没有没没给颜色值吧,那这里面给个颜色值啊BGR,咱们给它来个blue蓝色好了,那现在我们再来刷新。有了,那么当我鼠标放上来,你看诶是不是在顺时针旋转呢,看到了吗?哎,那么这是给的30度,那如果反过来,我给他说负的30第1G呢,那就是干嘛,是不是就向左边来了,你看啊,随便放看是不是向左边来了。对不对,哎,这就是咱们的这个叫什么旋转角度啊,旋转角度啊好了,那旋转我们知道有注意啊,旋转里边只干嘛,只允许放一个值啊,你看找到这里边,他说是元素允许什么呀,顺时针旋转,给定的角度允许负值,那么元素将逆时针旋转啊,它的单位是什么?第一啊代表旋转的角度啊好了,那旋转完这以后,我们再往下来看看什么呢?这个开这个开它是干嘛呢?是将这个呃有两个值啊,一个是宽度,一个高度给它干嘛呢?进行什么,你看原始尺寸的N倍也就是。
36:12
进行缩放啊,缩小或者是放大,缩小呢就是零到一之间的数,放大呢就是大于一的默认值是一啊,那OK,我们一样在这里边,我还是用这个三来测试了啊,现在这个三我们来看。刷新放在这儿什么都不动了,对吧,因为我把它旋转代码注释掉了吧,那注册掉以后接下来JS。Fromm,然后呢,在这里边rotate啊,不是rotate了啊,旋转了对吧?Color缩放啊好了,那我如果给个一,注意我就给一个一对吧,那现在你看我来说放来放有效果吗?没有吧,哎,一点效果都没有对吧?如果我给一个二呢,是不是放大一倍了,相当于哎两倍啊,不是一倍,刚才一是一倍是正常的,二是不就两倍了,那鼠标放看到了吗?它是不是在动,是不是在变大,哎,只要只要放下来它就干嘛在变大,那么能放大也能干嘛,也能进行缩小0.5。
37:05
啊,这个时候再来刷新,你看鼠标放是不是在缩小啊,看到了吧?哎,这个缩放我们用的还是挺多的,你看比如在这里边首页这里边啊,我们就有,比如说这块内容,你看鼠标放上来,你看它是不是放大的,而且注意啊,你看它在放大的控制,这里边文字是不是都在放大,看到了吗?对,那好,我们也做这么一个效果啊,我就不做原封的效果了,我就直接还是用个标签SEC select,这里边我们给它定一个ID,等于什么呀,BOX4好了,那在这里边我们通过井号BOX4冒号啊,不用冒号先设置对吧,WT就比如宽度我们给它500像素,然后高度1GT,我们给他100像素,然后G。Mar Mar上下100左右自动好了,给完设置这个以后,接下来呢,还是给它设置一个背景颜色,比如说这个背景颜色为这个,呃,Pink p,紫色POK。
38:00
给它紫色好了,那现在我们来看啊,返回到界面这里边来我们再来刷新,不能转换啊,现在是不是这样的了,那里边是不是需要有一些文字啊,对吧?那里边我们给它加一些文字啊,比如说这里边我就用div,那div的话,那里边我就直接给一行一,那就CV4个啊四个div,然后呢,我这里边的div浮动啊,那就是井号FO4里边的div让它干嘛呢?Float left进行左浮动,然后W宽度,注意啊,我这里边是多宽五对吗?那500除以四一百二十五呗。对吧,那每个我给他115的宽度,给完115的宽度以后,我杠。Left,我让它距离十像数对吧,那现在咱们来看走你。是不是就有了啊,有了以后一样,我给它每一个边框啊,给他一个边框叫做boardd border,一项数实现的井号。FF,来给个白色的边框,那现在来刷新。啊,这个下来了对吧,那给十有点大了啊给八吧。
39:04
这回对了吧,那OK,那接下来再干嘛呢?我让这个里边的内容注意它也会放大对不对,哎,那OK,我们给他这个行,就这个颜色吧,不动了啊,然后接下来井号BOX4BOX4冒号冒号号对吧?那么往这里边放的时候干嘛呢?我让它这个叫做transform下边的color,然后为多少,比如说为1.2啊不能太大对不对,给它为1.2好了,刷新刷新完以后,这回大家来看鼠标放。看到了吗?放以后这个字是不是也在变大呀,看到了吗?哎,说回去你看字也小了一点,对吧?放字是不是也在变大,哎,那OK,但是我们放的这个是不是有点太快了,所以我们可以干嘛给他一个什么,给他一个trans属性,我让他所有的这个元素,然后呢,在这个一秒钟完成啊好了,现在你来看啊,小新。诶。有效果吗?
40:00
我给谁了?哦,给错了,不好意思给div了,我应给谁?应该给BOX4吧?哎,这个是BOX4啊,好了,现在再来刷新。这是不是就是慢慢慢慢的了,你看我们这里边是不是也一样,你看鼠标放上来你看。它也是很慢的对吧,哎,只是什么我们的比他的还慢啊,那你可以再干嘛,再小点呗,比如点二零点二秒来完成这个动画,对吧,那这里边我再来刷新。你呢?看到了吧?哎,包括人家里有圆角,我们是不是也可以给它设置一个圆角包的杠I dius,诶,错了,包的BDR-I diuss,给它十像素的圆角对吧?那现在再来刷新,你看圆角是不是也有了,放上来它是不是也在大缩回去也得小看到了吧?哎,这就是咱们的缩放啊,好了,那缩放完这以后,我们再来看下什么呢?再来看一下我们的倾斜啊。那倾斜就是s scale啊,那么它是根据水平轴和垂直轴的这个翻转啊,那么它可以接受什么?接受两个值或者是一个值,那么两个值的时候是表示前面的水平,然后后面的垂直对吧?一个值呢,就只是水平水平轴的这个角度啊,而且这个函数是指元素的倾斜角度对不对?那么它跟这个SC是一样的,SC是不是也接受两个参数对吧?我们给一个就表示什么水平和垂直都一样了。
41:18
这里这里边咱们来看啊,我在测试的时候,是不是一直都给了一个,那能不能给两个呢?也可以咱们来原来这个啊,比如说前面的宽度是0.5,高度我要变成二,那现在你看它变成什么样的啊,看这蓝色你看。看到了吗?是不是也可以啊,哎,可以给两个值啊,也可以给两个值的,那么一样,我们倾斜也是这样的,那咱们来看我在这里边再来一个叫做E井号FO5。好了,我们用它来做一下倾斜,那么这里面一定要来设置一下井号box。BOX5冒号,呃,不用冒号,先不给他这个属性啊,直接是WDTH,我们先给他一个这么一个这个宽度啊,叫做200。
42:00
然后her也为200好了,然后这里边继续BA个,给它一个pink粉色。好,给一个粉色,那现在啊,我们来看我这里边是不是有一个200乘200的这么一个东西了,对吧,那么一样,接下来我让它也居中过来啊,Mar g Mar Mar marin上下为。100左右为自动好了,那现在看我当前这个元素是不是也居中过来了,居中过来以后接下来干嘛我要倾斜,咱说倾斜是可以给两个角度的,对不对?哎,那我鼠标放上来啊,清洁啊来井号box是五。然后叫S,呃,不对,Transform啊,Tin,然后是SK。SK ew,当然啊,你看每一个这个函数下面是不是都有X和Y这两个函数对吧?哎,当然你愿意用哪个用哪个,你要单独用的话,你就单独给一个设置对吧?那你要说两个S都Y都想设置的话,那我就直接用这个函数是不是更方便了?哎,那这里边可以接收一个值,可以接收两个值对不对,那接收一个值就代表着什么水平的,那比如说这里边我给他什么十第记。
43:04
实力又太少了啊,给他一个20吧。大一点好,那现在咱们来看周NY,你看是不是在倾斜呀,对不对,哎,因为这块我没给他放什么,没给他放how啊no OK how,那鼠标放上去在倾斜来,你看周尼,你看是不是这一个倾斜的这么一个角度,对吧,但这只是直线,什么直线水平对吧?那如果给垂直呢,50第一记好了,那这块我再给个垂直,你看周尼你看。垂直的是不也在变化,也在倾斜了,哎,OK,这就是咱们这个倾斜的啊,这个作为了解型这个用的比较少啊。Transform我也可以干嘛呢?直接给它一个值S。Kew啊,直接给他一个,比如说我直接给他一个50或者是45吧,比如45第1G对吧,那现在你看好了再来刷新,刷新完以后鼠标放看到了吧,哎,直接是不是倾斜,水平倾斜一个四四十五度,哎,这就是咱们这个4K5啊,给一个值就就代表水平,给两个值就是水平和什么和垂直啊好了,这就是咱们这个TRANSFORM2D的转换啊,那么一样有2D也有什么,也有3D对吧?好,那这节课我们先休息一下,下节课我们再来继续讲我们的3D转换。
我来说两句