00:00
好,那我们继续,那么上节课呢,我们看完我们的这个2D转换,我们再来看一下我们的这个3D转换啊,那么咱们来看3D转换呢,它常用的这些函数有这么多啊,那大可能看起来比较乱,实际上咱大家仔细看啊,经常就分这么几类,对吧?一个transl干嘛移动的对吧?还有一个SC进行缩放的,还有什么,还有一个roate进行旋转对吧?这里没有什么没有这个对吧?所以这里的3D里面实际上就这么几类啊,那么只是在原来2D的基础上加上什么,加上一个这个轴,看到了吗?加上一个轴。哎,你看每个里面都是有一个Z轴的,对不对,哎,这是它的什么,这是它的这个连接属性啊,那么这些呢,是它的每一个单独的设置。好了,那我们来看一下这个这轴到底是什么意思呢?我们浏览器正常,比如说2D它是一个平面的,3D是一个立体的,对吧,那平面的是这样的一个情况。对吧,比如说这是我们的X轴,这是我们的Y轴,对吧?那什么叫这轴呢?就是你拿一根针直线的向这里面扎,对吧?那扎去是不是在它的后面会延伸出这么一条线呢?对吧?那么这个就是咱们的这轴啊,这就是咱们这轴,所以现在X轴跟Y轴我们都知道,那主要是我们在这个3D属性里边,我们主要看一下什么,看一下它的这个这轴的使用啊好了,那我们现在来看一下,在这里边我们新建一个文件。
01:13
来右键新建一个文件,叫做这个转换3D。3D啊。然后17。然后再写上3D。转换。3D的话,好了,那一样在这里边啊,我给它两个标签selection,然后定义一个井号,比如说这个叫做box e啊BOX1好了,然后再来一个在里边,我再包含一个selection,这里边一样井号叫做BOX2。BOX2,好了,那这里边有这么两个标签,那么接下来我进行来设置一下style style,然后井号这个BOX1。Bo。BOXX1啊,包括是ETH。
02:02
Wi怎么回事?Width?给他。200好啊,然后高度呢,He我们也给他200 OK,宽高都有了,那么宽高都有了以后,接下来我们再给它一个什么呢?给他一个背景颜色吧,Background,给他一个这个红色red。啊,或者给他一个呃,蓝色吧,Be蓝色啊好了,那这个有了,有了以后接下来还有DIV2呢,对吧,那就叫box r,然后在这里边也一样,Wi,我们给它设置一个200,然后he也为200 OK,然后再来一个BGRN为这个,呃,好了,那现在我们先来看一下我们的页面效果。来,你看在我的页面中是不是有这么样的一个D面啊,对吧?注意啊,我的这个子类跟父类是同样大小的,是不是就给它覆盖掉了对不对,包括比如说我这块给200像素,我是是也可以100%,如果给100%的高宽度,100%的高度,那这个时候它是不是自动去继承它负类跟这个宽度和高度,你看我刷新是不是一样的,哎,那OK,那接下来我们先来看什么呢?我们先来看它的这个第一个属性叫什么呢?叫做这个,呃,Translator对吧?Translator好了,那translator叫什么移动对吗?
03:20
哎,那OK,那怎么移动呢?咱们来看好了,我让这个二啊给他一个trans,然后加上一个translator啊translator z,因为X跟Y我们知道了,对吧,比如说X这里边我直接给他说10PX对吧,那这个X我们大写啊好了,那现在咱们来看啊,我这里边。一点击刷新,你看它确实移动了对不对?哎,那我们问题不在这儿,问题在哪呢?在如果我们要是移动Z呢,对吧?Z呢,比如说我们给他100PX啊,让他远一点对不对,那现在近一点啊来再来刷新,你看有效果吗?是不是又回来没有什么效果吧,哎,注意啊,我们要用这个3D的情况下,它要干嘛呢?它需要做到一个透视的效果啊,就是一个伪3D的效果,因为我们浏览器,我们的页面默认它就是一个2D,它不是3D的,所以我们需要去加一个属性,让它呈现出什么,呈现出伪3D的效果啊,只有这样的话呢,我们才能干嘛,才能更好的去。
04:14
实现这个效果,那么怎么样来呈现这个伪3D呢?咱们来看啊,我在这里边,呃。写一下。我写个注释吧啊。这个叫做PSPPTV啊,它就干嘛呢,叫做透视。透视。好,主要的作用就是呈现,呈现,呈现出这个为。3D啊,那什么叫伪3D呢?咱们来看啊,是这样的。咱们来看,比如说在这里边我来画个图啊,能看,比如这块我有个眼睛对吧,那么眼睛再去看一个物体的时候,比如说物体在这块啊,比如说这块有个物体,这么大一个物体这边是一个光面,一个板,对吧?那么当眼睛看到这个物体照射到板的时候,你看这个物体在板的位置的大小,是不是就是这么大,对吧?那么同样如果说我在这块还有一个这么大的一个。
05:09
一个板子,那么这个时候这个板子离离眼睛的距离是不是要远一些,那么当眼睛照看它照射到板这个平面的时候,是不是就会小一些,对吧?所以这时候是不是什么近大远小啊,哎,所以在这里边我们干嘛呢?给他去设置这么一个透视效果啊,那么给谁是给它的负类进行什么进行设置PRPR。然后给它设置多少呢?比如说我让它距离是400像素对吧,那么一旦给它设置好了以后,那么接下来干嘛,我给他设置这个正100,正100是不是大值对吧?大值的话,你看好了,这个时候我再来刷新。你看整个这个是不是离我近,离我近它是不是就放大了,对不对,那一样,我要给它设置负值呢,我让它往里边去对吗?那往里边去的话,那你看再来刷新,你看是不是就缩小了,哎,这就是咱们Z轴的移动啊,这是咱们这轴的移动,使用这个杠Z啊,那么当然我们能用这个属性也可以用什么,也可以用这个tins,给他一个什么,给他一个这个T。
06:08
3D啊这个那咱们来看啊,用它也可以一样可以进行什么设置,但是它设置的时候你不能省略值啊,你必须把这个比如说水平的对吧,然后移动那个垂直的还有什么,还有我们Z轴,就是X轴Y轴,还有我们的Z轴同时设置才可以啊。那你比如说前两个不需要我只设置这轴的话,那没问题,你把前面两个设置零,但是不能省略明白吧,那TRANSLATOR3D。负十十哦。这里面需要给什么,给逗号啊,逗号来分割每一个值,那OK,那这就可以了,那现在我们再来看。你看这个时候是不是也可以啊,哎,那当然,如果我说我不给这个十啊,就是这块我不移动,这个我也不移动,就是X轴跟Y轴都不移动的情况下,我就只移动这轴,你看是不是还是像跟我们原来一样啊,哎,这就是咱们这个。简写属性的使用啊,好了那么一样,那么这个我们了解过来以后啊,我们再来看什么呢?再来看一下我们的这个缩放啊。
07:06
叫做我不这么写了,我用鼠标移动吧,来给他一个BOX3冒号啊。然后当移动过来以后干嘛呢。我们要进行缩放对吧,那么进行缩放注意啊,我这里边是不是还有个伪3D的一个效果,这个伪3D我也可以给它放到这儿,知道吧,它本身也属于什么,也属于穿着方的属性,那么给它放到这里就不能这么用了,就得加上什么,加上括号,就类似于调函数的方式来使用啊,调函数方式来使用,然后呢,接下来我们要什么开。撕开了Z,对吧,我给了多少呢?比如说我给他一个一吧,给一个一好,那现在啊,咱们来看。有什么效果没有?刷新看鼠标框你看。一放是不是就放大了对吧?哎,这么看是有效果,那么一样,我要给他一个负一呢,看好了我给他一个负一啊,给他负一再来刷新,诶你看是不是跟我正一差不多的效果,对不对?哎,但实际上是什么呀,它如果给负数的话,它是沿着一个轴在旋转啊,你看好了是不是这样的,我这里边啊,让它慢动作一下啊来,然后秒完。
08:17
你看好了。走你你看如果是负数看到吗。看到了吗?哎,它是这样的一个效果啊,就鼠标放上来你看。看到了吧,啊,它是这样的一个效果,它是沿着这个轴旋转一圈以后,就沿着这个这轴旋转一圈以后再放大,明白了吧?哎,那OK,这是给他的正值和负值,那么它能给小数吗?也可以,但是没有任何作用了啊,比如我给个点五。刷新你看好了。是不是一样,只是还是放这么大的对不对,哎,它并没有什么,并没有说就是这里边这个这轴啊,大家只需要记住一个就行了,我一般在给的时候,这轴给值。如果你需要用到,如果需要用到给值就是给一或者是负一啊,因为你看我这里边是有一个有一个什么,有一个移动,把这周移动了,所以我才能看出来这个效果对吧,如果不移动的时候,这个时候你看如果说我给他这个呃点五。
09:11
刷新。有效果吗?是不是什么效果都没有看到了吗?哎,所以这个这轴看效果不是很明显啊,这个这轴看效果,看缩放效果,我们没有办法缩放,是没有办法沿着这轴进行缩放的,对吧?所以它不是很明显啊,那么一般情况下我们都怎么用的,比如说这里边你要用的话,那可以怎么办,比如说在这里TS,然后接下来我给他什么一个这个。3D啊,给个3D,那我说这个X轴我要给它放大两倍对吧,然后这个这个这个轴呢,我说点五对吧,然后这个轴我再点五,这么给这么给一样,我只能看出X轴跟Y轴,你看啊。够了吗?这轴还是没有什么效果啊,这周还没有,还是没有什么效果,还是Y就只有X跟Y轴效果是比较比较明显的啊,所以大家记住这个问题啊,好了,那把它注释掉了,那OK,那了解完这个开以后,那么接下来我们再来看什么呢?我们还有一个旋转对不对。
10:07
来找到这里边我们的旋转叫什么叫做rotate啊rotate那OK,我们来看一下,那旋转也一样,主要是这个以这轴进行旋转,对吧,那么咱们现在不管是这轴还是X轴还是Y轴,首先我们先来研究一下旋转到底什么样的啊,旋转咱们来看。比如这是X啊,这是Y。X,这是Y,那么如果沿着X轴进行旋转的话,它是不是正么样进行旋转的对不对?哎,如果沿着Y轴进行旋转的,它是不是正面进行旋转的,对吧?那如果沿着这周旋转呢?这周旋转的话,我们是不是有点看不出来了,那我们一会看下效果啊好了,我们先来测试一下,比如说在这里边,嗯,我给个图片吧。我们拿图片来测试,会好好测试一些啊,当前目录a.GBG,好,这里面真有个a.GBG,我看a.GP是什么?哎,就这张图片了啊好了,就这张图片,那么接下来干嘛呢?我们要给它进行一个旋转的,就是以内接,然后冒号号对吧,那这里边我给它一个叫做川,然后。
11:07
呃。X吧,我先不Z了啊,不那个啊。来rotate X,好,我让它沿X轴旋转多少度呢?比如说180BEG。第一季OK,那么现在我们来看啊,我来刷新,刷新完以后你看我,诶看速度是不是很快,我们看不看不出来啊,哎,那怎么办,我给他。也加一个吧,来image,然后叫做呃A还是三秒。来刷新这位你看啊你看。是不是这么在旋转的180度对吧,那OK,那么因为现在我没有给它呈现出3D的效果,如果我给它呈现出3D的效果呢,Pre re pre。PRESP。P。P啊PRPRP,然后这里边比如说我一样给他400啊,那现在我们来看啊刷新,如果我给它加上这个伪3D效果,你看到了是不是有近大远小的效果了来。
12:10
诶,有吗?放。你看没没看出来有近大远小的吧,看到了吧,哎,他有没在宣传,他有在宣传,但是我们并没有看出它有这种叫什么近大远小的效果,那OK,我给我不给这个,因为本身它是以嘛,我不能给以image加,你知道吧,我想给谁加,应该给这个包的加啊,因因为以image是被包的包含了,那我给他负类加啊,因为我们当前移动是移动,谁移动是移动的image啊,那现在你再来看周尼。看到了吗?你看当你这个最远的时候,你看诶诶最远的时候它是不是在缩小,你看。看到了吗?哎,这就是沿沿着什么,沿着X轴在旋转啊,沿着X轴在旋转,那么能沿X轴旋转的话,那我也能沿什么沿Y轴进行旋转。来刷新,你看Y轴旋转啊走你看到了吗?哎,你看越远的是不是越小啊,对吧,如果我不加上这个透视的话,我不加透视的话,它是不是就是都是一样的尺寸在做旋转,你看。
13:10
看到了吗?是不是一样的尺寸,如果旋转到90的时候,旋转到90是不是就一条线了,注意啊,你看这里边我给他90,因为90的时候,不管是Y轴也好,还是X轴轴是不是就是一条线直对着我。哎呀,我们有点看不出来呀。我把这个三秒动画也也给它注销掉,看能不能看出来哦诶。好,你看啊,到90是没有的,你看是不是没有,因为一条线了,再说了,你看我手上放它是黄的,你看。咱给它拿出来CTRLC放到这里边看好了啊,我直接让IMAGE90了啊,我不让不鼠标移动了来刷新,你看还有了吗?没有了,其实不是没有了是怎么样,它在沿着X沿着Y轴在转的时候,转到这块是不是就一条线,所以这条线我们看不到了,你得从从这什么,从这面看是不是才能看到。
14:02
哎,所以大家记住,如果到90的时候,它是干嘛,它是变成一条线了啊。好,那我把这些再开起来啊,再开起来那么一样,我们再还原这个180度,那OK,那这周Y周我们看完了,再看一下什么,再看下我们这周啊,那这里边再来刷新来,你看我沿着这周在翻转。是不是就这么转了,哎,这就沿着什么,沿着Z轴在转嘛,就是什么相当于像原地转圈一样,看到没有。看没看着。哎,这就是什么,沿着这轴再去旋转那么一样,我把这个开起来。刷新。看到吧,跟我们这个这轴开开的时候就跟我们开出透视,开启透视的时候,这轴再去旋转的时候,看不出来太大效果,对吧?哎,只有X轴跟Y轴啊,在这个呈现3D空间里边效果是比较明显的,对吧?继承了这种这个近大远小的效果啊好了,这就是咱们的旋转啊,3D的旋转属性那么一样,我们也可以干嘛使用这个3D这个东西来帮我们做做这个旋转,那这里面我就需要什么XY是不是都要给了,比如说30,这个三十四十也行,第1G对吧,然后再往后Y呢,比如说我给他50第1G对吧,然后Z呢,给他100第1G。
15:18
好了,那现在三个值我都有了,对吧,RO的3D。旋转40度,50度,100度,为什么会给条线呢?Rie的3D。不好使了是吧,哎,也就是说你看啊。一点没动啊,一点没动,那OK,我这块写的就不对。30DG来,我给它缩小。RO的RRO3D来RO3D它是可以匹配到的,对吧,有这个命令,那十十十。
16:00
第一季。不让我给这个度数是吧,那我就给随便给一个吧,给完以后先看好不好使,走你走你诶诶看。用不了是吧,啊用不了,那你看我们查一下手册,看看我们写的有没有毛病啊CSS3。叫做RO rotate rotate3d,我这个手出还搜不出来呢,啊这个时候搜不出来,那搜不出来怎么办?我们上这个网站去搜一下啊,我们看一下它是怎么用的,来百度这里边。我们来搜一下叫RO3D对吧。来这里边有什么层叠样式表,那你看啊,这里边有这个菜鸟教程对吧,那随便点一个点过来进来,进来以后我们来看它是怎么来用的啊,他说这个来定义一个函数,你看RO的3D给111哦,他需要给什么,给四个参数对吧?最后尾他给的这个角度吧,旋转的角度啊,那OK,那咱们就按照他这个来,你看好了,给他一。一。
17:00
一然后给他一个什么,给他一个45第一季,哎,它是统一的,相当于是吧,那OK,咱们来看啊。刷新来。周令啊。是不是所有边都在,都在走啊,看到了吗?所有边都在,都在什么都在做它的这个旋转啊,那么一样,这里边他也会给对应的解释,你可以继续往下看啊,他说这里边你看如果这个角度。啊,运动量由指定的这个角度来定义,如果为正运动将顺时针,如果为负将逆时针,对吧,那现在咱们来看,我给他一个负。注意啊,水平呢,我给的是负的啊,那OK,现在再来。周礼,你看。水平的是不是就往往往往左边来了,哎,有点往左边来的感觉,因为我给的这个度数比较小嘛,看到了吗?哎,所以这里边它是怎么设置的,根据这个正负值对吧?那这里边还有什么?还有这个二啊,0.5啊,你看咱继续往下来,这里边有说啊在升力空间中旋转有三个自由维度,看到了吗?哎,描述了什么旋转的轴,旋转轴由一组XYZ来定义的,对吧?那么并且通过什么变换原点来传递,既通过这个里边传的这个定义啊,那么如果这些图这些这个矢量被赋予什么非标准值,即三个坐标值的平方。
18:16
和不等于一时就是它们的平方,和不等于将会干嘛将会?被内部隐视标准化啊,非标准矢量,例如空值和什么和这种000对吧,就是说不能给零啊,给零将会怎么样,将会使旋转不起作用,看到了吗?不但不影,但是不影响整个CS属性的其他效果啊,就是你正常用还没问题啊,不会影响其他效果啊,所以大家记住,当我们加他的时候。这里边说了它是什么,可以是零到一之间的数值,表示旋转轴X坐标方向的一个矢量,就是说什么意思啊,来就简单理解,你给负的它就往左来对吧,这个你给负的它就往上去,明白吧,这个你给不给负的远近的距离你也看不出来,明白吧,那现在你看我这两个多少你看。
19:02
是不是都往上去呢?哎,如果我把它给正的,你看给成正值啊。再刷新你看啊,它是不是就往下来你看。垂直的对角度是不是就往下来了,哎,所以这两个就是一个矢量,你不用去考虑说我给个0.5啊什么好不好使啊,对吧,你给个0.5你看。刷新啊。看到了吗?这也在走哎,所以你不用考虑这些东西,你就给一跟负一就行了,负呢就代表着它什么,往左对吧,这个负呢就代表往上啊,然后呢,后面给他给他什么,给他旋转的角度啊,这就是咱们RO的3D这个。连贯属性的操作啊,那么当然如果我单独给属性,那就不需要考虑那么麻烦的事儿了,对吧,直接是然后。你用哪个我们就给哪个,比如说我就用X的,那我就直接给他多少,比如说给他180EG就可以了。180度对吧,那OK,这个时候你再来看走,你是不是就没问题了,哎,所以大家这里边要注意一下啊,3D在用的时候,它就多一个参数,你先给它的这个相当于偏移量对不对?诶给完这个偏移量以后再干嘛,再给他的这个旋转角度啊,这就是咱们的这个3D啊,转换好了,那3D转换了解过之后,我们再去看一个东西,看什么呢?看一下刚才我们一直在用的transaction啊,这个东西我们一直在用对吧?但是呢,我们一直都没有说过,那好,那现在我们来看啊,这个里边我现在用的是什么?是简写属性,它的这个全写属性。
20:24
不是权益就是派生的子属性更多啊,那我下来看它叫什么呢?叫做过渡。叫transaction,那什么是过渡呢?咱说了使用csi属性值在一段时间内平滑的去去变换对吧?这就叫什么过渡,比如说这个鼠标全停后,那么背景色在一秒内由白色平滑的过渡到红色啊,这是过渡,那么过渡的时候需要指定四个要素,第一个是过渡的属性,就是你要给哪个属性过渡,你是给bank过渡还是给color过渡对吧?然后第二次需要过渡的时间,然后过渡的函数以及延迟时间是这四个函数,当然刚才在我用的时候,我是不是一直只给两个呀,对吧?然后触发过度,用户通过什么某种行为来进行触发,比如点击啊或者悬浮啊,都是要有一个事件来进行触发,不是说一刷新就要过渡的啊,那样的话是没有效果的。好了,那看完这些,我们先来测试一个最简单的啊,刚才我们在这里面说了它可以干嘛呢?让背景颜色在一段时间内进行平滑的过渡,对不对?那OK,比如说在这里面PP文件啊,我们再来一个叫做。
21:26
给它关掉,重来文件。点错了啊这里。新建一个HTML文件啊好了,18,我们来看一下,这个叫过渡。过渡啊,OK,那么咱们来这里边一样过渡,好在这里边我们先给他一个这个div div吧,叫div行,然后井号叫div OK,那么有了这么一个以后,我来给它设置这个样式,咱们来看啊,井号DVE。DVE,然后呢,我让它的这个宽度W,比如宽度等于200,然后he也等于200,然后默认,比如说我们给它一个背景颜色,为什么为红色,那么我想它干嘛呢?当我鼠标放上来以后做一件事,对吧?鼠标放上来后让它干嘛?让它的背景颜色变成什么,变成一个。
22:14
呃,紫色吧,这里边PP好了,现在啊,它是一个什么,很快的一种方式,并不是一个平滑的效果啊,你看。来放你看是不是直接就变了,哎,那么现在我想它平滑的去过渡怎么办呢?我在这里边可以通过一个属性叫什么an,不是不是an啊,An叫trans transaction啊transaction好了,那么给他来设置,我要给谁啊,是不是给背景这个属性对吧?哎,给背景颜色叫background color对吧?当然我没用这个,我直也可以直接给这个background也行啊,然后多长时间完事呢?比如说我让他两秒钟完事好了,那现在我们来看啊,我再来刷新。刷新完以后,鼠标放上来,你看是不是逐渐在过渡啊,看到了吗?逐渐在过渡。看到了吗?啊,变成这个颜色,当然啊,这里边我不指定这个属性,我直接给个哦,代表什么意思啊,代表就是所有我能去操作的这些属性啊,所有能去操作的属性,咱们不是所有属性都能操作,是只它有支持的属性才可以用啊,那么支持属性有哪些呢?这里边。
23:14
咱们来看啊,我往下来第二页,那么支持的属性,你看多个属性就动画分割,支持属性可以干嘛呀,可以是颜色呀,对吧,还有取之为数值的属性,还有转换属性,渐变阴影,只有这些属性才可以明白吧,所以我这里边我要不写具体某一个属性,我就干嘛呢,我就写个哦,代表什么,代表所有,那么如果有多个属性呢,比如说咱们来看啊,我这里边已经有一个背景颜色了,对吧,那好,我让它的宽度也在变化,宽度变成什么,变成300。对吧,然后高度呢,也变成300,那OK,那么这里边你看好了我要给谁,我要给BAGR进行过度,还要给谁,还要给宽度进行过度,那么现在都是两秒啊,现在你来看我再来刷新啊,来鼠标放,注意高度是不是瞬间就过来了,看到了吗?因为高度没给。所以这里边如果我需要高度的话,我再加一个h he,再给个高度,那么这个时候才可以你看刷新。
24:11
我。He a。Ggt啊,好了,这回好了啊,刚才打错了,好了再来刷新。那你看放。是不是有个变化,我的宽度是不是一下到了,然后高度是不是就慢慢长了,看到了吧,哎,宽高他俩是不是只给我支持了一个。对不对,那你看我写的有问题吗?没有什么问题吧,这块我再加个逗号,跟我加逗号没有关系啊,跟我加这个逗号没有关系,来你看好了刷新。哎哎,真就有关系啊,有关系看到了吗。喂。啊,这就是咱们这个是多设置啊,那多次子是最后这块也要加一个逗号啊,不加逗号不行对不对,那OK,那如果这块大家说用不好,我也记不住对吧,那怎么办呢?我就可以给他设置一个所有的九九号对吧穿。
25:06
然后al所有的两秒两秒内完成,那你看我这几个都会变成两秒内完成的啊,来你看再来刷新,刷新以后放。看宽高是不是同时了。哎,所有的都给我干嘛,都给我变成两秒内来完成的了啊好了,这就是咱们这个transaction这个过渡属性啊,那么这是它的简写属性,而且我只用了两个值,它有几个值,它有四个值对不对,那么再往下来还有什么呢?过渡时间我们用完了对吧,再就是过渡的函数有什么,有匀有默认值,默认值你看是规定慢速开始,然后变快,然后再慢速结束的这么一个效果,匀速呢叫做Le,我们用下匀速,咱们来看啊,这里边再我们加加一个什么匀速,好那现在我们来刷新。周,你你看。是不是都始终都是一个速度,然后回来你看是不是也是一个速度,对吧,但是如果我不用这个LA呢,咱们来看啊,用它默认的来刷新,你看啊鼠标放。
26:00
你看他是不是有一个,有一个刚开始是慢或者是快,你看。对吧,是不是感觉到从到这块一下就变成大的了,哎,所以大家注意啊,它是可以去指定它的这个运动的方式的啊,包括我还可以干嘛。你看运动方式用它就是什么,这是它的子属性啊,就单独设置这个过渡函数的啊,用这个呢,就单独设置这个时间的啊,然后还有一个什么,还有一个还有一个什么叫延迟时间啊,就是延迟多少多久执行,那么因为他用的是我用的是检验属性,所以我直接点就行了,我说三呃三秒以后再执行这个效果啊好了,现在各位你来看啊,我刷新一下鼠标放上来123走。看到了吗?是不是三秒以后才执行这个效果,哎,所以它有一个延时的效果啊,当一样,当我鼠标离开也是三秒以后它再回去啊,这就是咱们这个过渡属性那么一样,这是它的简写属性,那它的这个单独来单独来写的话啊。叫做过渡。
27:01
属性值属性啊,值属性,比如说我单独去设置什么,设置它的这个,呃过要过度的属性,那就叫TTS。Sa pro。杠pro。OK,然后设置哪个属性对吧,还有什么属性,还有wi还有什么属性,He OK是这几个属性啊,然后呢,再往下来还有什么东西,还有我过度的完成时间吗?叫做过度完成时间。过渡完成时间,那时间的话TS。穿,然后再来叫DR。好,然后时间,比如说我这里面的三秒完成对吧,然后再往下来还有什么,还有我们过度的函数对吧,也就是执行这个速度啊叫过渡,过渡函数。
28:06
过渡函数好,叫做tr ansi-fu,呃,不是fu,是ti。IG func好了,然后这里边有这么多属性对吧?那咱们也看一下这里边属性,每一个属性都代表什么意思啊,有这么几个对吧?这是默认值,这个呃,EE-in呢,它是干嘛规定以慢速开始,然后加速效果对吧?然后这是什么呢?规定以慢速结速减速的效果对不对?然后这个呢,是规定以慢速开始和结束,然后先加速后减速对不对?那OK,我们就随便拿一个啊,咱们可以测试一下扔到这里面来。好了,过渡函数有了,接下来是不是还有延迟时间,延迟时间我们先不给了,我们现在先看效果来吧,刷新一下,刷新完以后放。你看是不是以慢速开始啊,然后那些是加速的,然后结束的时候呢。
29:01
你看到最后结束的时候,是不是又以慢速在在做结束,哎,这就是它的这个过渡的这些函数啊,那么它所选的值都是什么都是。在这个指定范围内呢,你不能乱写啊,只有说这里边支持的你才可以写啊,好了,最后一个这个过渡的延迟时间啊,那延迟时间的话叫做过渡。岩石。时间。直接tion。叫做。我再看一眼,我也记不住这个。B。好了看啊延迟多久呢?我说呃,三秒以后吧,还是三秒三秒以后啊,好三秒以后开始执行,那现在我们来看,返回来再来刷新一下,那么周泥那不动123周。对,不在动了,哎,鼠标一开,它等到三秒以后再缩回来。看到了吧,哎,这就是什么,这就是咱们的过渡属性啊,好了,那么过度了解完之后,我们再往下看,看什么呢?看我们的这个。
30:08
啊,这是它的简写属性啊,这个我们一直在说,对吧,你看这个属性可以是什么,是一个简写属性,用于设置四个过度的值,然后这里边需要给他的这个值是这这样的,对吧,我一直都在用,当然后面这两个值我可以省略,因为他们两个都有默认值,对吧,我不加最后这一个时间的话就没有延迟,我就直接给一个,我要给哪个属性做过渡,然后多长时间过渡完成是不是就可以了,哎,那OK,这就是咱们的简写属性啊好了,那接下来我们再来看什么呢?再来看我们的anim啊,它叫做什么呢?叫做动画。那么过度属性只能来模拟动画的效果,它不能完全使用这个anim的动画啊,不能完全跟它一样,那么anim属性呢,它可以制作类似于flash的动画啊,它通过什么呢?通过关键帧控制动画的每一步,使元素从一种样式逐渐的变化成另外一种样式,实现复杂的动画效果,这就是en的作用啊。好,那再往下来,那么an呢,需要去跟谁呢?跟这个家伙去配合,他们两个配合才能去实现一个什么,实现一个我们的动画啊,好了,那现在咱们来看,比如说,嗯。
31:13
这里面先看下语法吧,看一下an,呃,K frames的语法啊,先是and ADD k frame,然后加上它一个名字,然后后面才是什么,才是它的这些属性啊,这里边给的这些东西什么意思?Form,也就是开始就百分或者是0%对吧,就你开始时候是什么样子,你结束的时候又是什么样,它就这个意思啊,这个意思,然后anim的语法呢?Anim的语法在这呢?啊,Anim语法你看第一个我需要给这也是一个简写属性啊,我们就先用简写属性就好了,第一个我们需要给个name name什么呢?Name就是由他来定义的动画的名字,对吧?然后再往后一个动画执行时间,然后它的这个运动的方式,然后还有什么,还有它的这个,呃。叫什么延时执行的时间对吧,包括还有这两个属性,这两个属性一会儿是什么,我们再来看啊好了,那咱不管这么多,我们先去简单的来执行一个啊。
32:05
好,我们在这里边再来打开啊,我们先来演示一下这个动画,咱们来看啊,比如说在这里边找一个文件叫做19叫做动画啊。动画咱们先来看一下动画跟这个trans transaion就是过渡到底有什么区别啊,比如说在这里边一样,我们先来一个div,然后给它来一个叫做井号DV啊,先给他这么一个东西,然后呢一样style来设置,咱们来看啊,比如说我想让它在过渡的时候有三种效果,哪三种效果呢?就是比如说默认情况下来,比如说先这样啊DV,然后WD,我们先给它设置一下它的这个样式啊宽。高。那现在咱们如果用trans s来做的话,传sa,然后给他这个哪个属性,比如说我就给所有了啊,然后呢,这个两秒完成对吧,其他属性我不需要了啊,然后接下来呢,井号DVEV。
33:07
冒号,Ho ho v号。当我移动了以后,我干嘛呢?我是不是让它的这个b background变成红,第二个是绿吧,红绿对吧,我能再变成蓝色吗?没办法写了吧,你看我红绿或者我这块再给一个白多少bak红绿蓝B好。你看行不行啊,这里边,哎不对。回来。周立。刷新啊,鼠标放。你看有绿色吗?红跟绿之间是变成什么了,不是红跟蓝之间是不是有点紫色,它不会变绿对吗?那也就说我设置这个绿色根本就什么,根本就不好使啊,不是不好使,是蓝色把这个绿给替给替换掉了,对吧?你看啊,我把这个绿色注射掉,注射掉也一样来刷新,你看走你你看红跟蓝之间是不是还是有点紫啊。
34:01
哎,并没有这个绿色的呈现,对吧,这就是过度的一个单一性,那么如果这样效果我想要去实现的话,我可以干嘛呢?我可以通过我们的这个an来去实现啊,那么animation的话怎么来实现,咱们来看好了an animation第一个它需要干嘛?指定你动画的名字,但是这个呢,需要是配合谁呀,ADDK。啊,需要配合他来去一起,那么这里边就要给他起名字,比如说叫做MYMY,哈哈吧,啊随便起了个名字,那这块也叫做什么MY,哈哈,好了,那接下来呢,接下来就是你这个动画多长执行多长时间,比如说执行三秒对吧,执行三秒,然后包括还有什么它的执行函数。啊,执行函数还有什么,还有它是否重复对吧,是否重复啊等等这一系列,我们就先给这些吧,因为其他的这些东西,呃,这些属性我们还没有学,对吧,我先给这个最它跟我们这个呃,Trans参数是一样,四个都是一的,都是一样的,好了,那接下来咱们再来看,那这里边我就开始去给他值了,怎么给呢?你看这个往这里来。
35:05
你看k frame给了名字对吧,接下来什么form到多少,To到多少,就是0%的时候是多少,To呢,就到结尾的时候是多少对吧?你可以给这种英文它,但是它只能支持两个form和to,那么建议干嘛呢?我们可以改分比就可以了,比如说像这里边,这里边第一个零,0%的时候,你看啊,你这里边是不是这么写的,0%的时候你要干嘛,CS什么样式,那比如说这里边我的CS要是干嘛,就是background b变成什么,变成这个GR绿色,对吧,然后再往后,比如说50%的时候。你的background变什么颜色,比如说变蓝色?对吧,我这里边还能再来个100%吧,哎,等到100%的时候呢。我白变成什么,变成黄色我再多加啊,变粉色吧,多加一个啊好了,那现在这个动画的关键帧我就写完了,对吧,你看我从零到50是不是写了三个,当然你也可以0%,1%,2%,你要是有时间,你愿意一直写到100%也没有问题啊,我这里边只是给他这么一个范围啊,0%的时候怎么样,对吧?那现在你看我来刷新,刷新完以后啊。
36:09
你看是不是自己在走了,看到了吗?哎,自己在走,因为什么我把any写到这个标签里面了,我这any应该写到哪啊,写号DVE冒号号对吧,当我给它触发的时候,我在那动,这样看的更清楚一些啊来刷新看好了鼠标放上去。别放。那红绿蓝。这叫粉红又红了,对吧?你看这个动画就没有了,看到了吗?再来一次。都红了对吧,再来一次红。有点太快了是吧,我们给他呃0%的时候让它变绿不行啊,我们百分之呃50的时候让它变绿,100%的时候让它变蓝啊,然后这个紫色我们就不要了,对吧?啊这样的话呢,会看的更清楚一些啊来刷新,现在是红的,把鼠标放上去,你看绿。来。
37:00
看明白了,哎,这就是咱们的这个动画,它可以干嘛呢?根据我们调的这个关键帧啊,在不同的这个地方去干嘛,设置不同的这个样式啊好了,那再往下来我们再来接着看啊,那动画里面不光这三个属性对吧。来我们往下来那么一样,这里面还有什么,还有它这个是否重复,以及这个它动画的执行方式啊,那咱们直接看这个子属性了,子属性第一个动画子属性叫什么an name,它是调用动画的名称,对吧?再往后呢,这个S是动画完成一个周期所需要的时间,然后这个呢,是动画规定的这个速度,以及这个是什么播放之前的延迟时间,这四个属性跟我们那个哎,呃。叫什么,跟我们过度的属性是不是一样的,对不对,那OK,看不一样的啊,不一样的在这儿呢。这是不一样的,第一个干嘛呢?它是指播放的次数,这个标什么无限次播放来你看好了,我把它复制过来啊,复制到哪儿呢?复制到我们这里边,直接我往这粘贴了啊注意我用的都是简写属性对吧,如果是全写属性应该什么样,你就直接把它加进来,这么是不是它等于它才行啊,哎,那OK,这里边。
38:08
刷新。我鼠标就放在这儿不动了。到红,你看红完之后又绿绿完又蓝对吧,蓝完又红又绿又蓝,只要我鼠标放在这儿,它是不是就无限制在播放啊,哎,我能指定无限制播放,我也能干嘛呢,我说二二什么意思呢,代表播放两次播放两次刷新,你看好了啊,来一。到红是不是再再红再走就第二次对吧,红他又走了,这第二次了吧。再到红再走吗?这回是不是就不走了,是不是只播放了两次,哎,所以说我可以干嘛呢?指定它播放的次数对吧?要么为我指定的数值,要么干嘛呀,让它进行什么进行无限循环啊,然后再来动画播放的方向啊,这个呢为默认值就表示正常播放,这个呢表示什么轮轮流播放机动画会在什么奇数式时候正常播放,而在偶数的时候向后播放,看到了吗?那用一下看一下我们这个效果能没有效果啊,没有效果的时候,一会儿我给大家写一个幻灯片,我们再来试一下啊,好了,先用它,那么这里边来我再来刷新。
39:12
来。红。没有了是吧,哎,没有了啊,我应该给他加一个什么,加一个这个音。让他怎么让他进行无限循环嘛,来。看有没有变化啊,红绿蓝。红,哎,是不是变了,绿红看到了吗,绿蓝。看到了吧。哎,绿。红绿。来。没错吧?你看啊,蓝完之后是绿了,原来是什么红绿蓝,蓝完是不是应该红啊,按照顺序播放对吧?那这个时候可以干嘛呢?我可以打乱它对吧?他说了表示轮轮流播放,记动画播放在基数的时候是正常播放了,而到偶数以后呢,就是第一次的时候你是正常的,等到第二次的时候,第二次播放是不是偶数了,偶数次以后干嘛,它开始向后播放了啊,就这个意思,然后还有什么呢?还有动画停在最后一帧啊,这个默认呢为这个N,当我设置它以后,就代表动画停到最后一帧,最后一帧什么意思?就你播放完以后停到最后一个一块嘛,比如这里边播完以后是不是这个对吧?那它停到最后一块,现在啊,我把这两个先注释掉,咱们来看一下啊,我正常播放一次,他停到哪了?An my,哈哈,然后三秒对吧,就就这两个就够了啊,来走一遍。
40:33
红绿、蓝。完事红是不是回到红了,哎,我要想让它保留到最后一帧的话,那OK,这里边我可以干嘛,直接加这个属性值CTRLC复制过来。那现在你来看。刷新。好了,你看拦完以后是不是就不动了,哎,不变红了吧,我鼠标挪走,他再变红,因为我给的是这个how事件嘛,对不对,哎,给的是how方法啊好,那再往下来还有最后一个,最后一个什么,他说规定动画正在运行还是暂停啊,如果是它呢,就是什么,就是这个运行,呃,这个暂停,如果是它呢,就是什么,就是这个。
41:13
叫叫叫叫叫什么?呃,运行呗,对吧,对,它是这个暂停啊,它就是运行啊好了,那现在我只能给一个对吧,然后因为我们还不会这个GS,所以我们只能给一个,我们把这个值啊给它复制过来一个,比如说默认,默认的时候我们是什么,我是暂停的,默认的时候我让它运行吧。这样的control。C我把它复制一下啊,看好了给它放到哪儿呢?放到这里边来,然后我不用它了,而用什么呢?Infinite是不是让它一直在播放啊,当我鼠标移动上来以后,我干嘛呢?哎,我就直接用它这个简写属性了啊,让它暂停。暂停好了,这个时候咱们来看啊。刷新刷新完以后,你看它自动播放了,看到了吗?它会无限次自动播放,当我鼠标放上来以后,你看是不是暂停了,放到这个位置它就暂停了,看到了吧,诶挪总它正常不放对吧,再放是不是就暂停了,再挪走,诶看。
42:16
没有捕捉到变色。一个。这回是不是捕捉到变色的地方了,哎,这就是咱们这个动画中需要用到的这些属性啊,当然这个动画里面需要用到的这个简写属性,就是简写属性会比较多啊,检解属性我就不挨个给大家去一个一个去试验了,因为它跟这个什么,跟我们这个an不是an啊,跟这个穿S他俩是一样的对吧?哎,有什么简写属性你就加什么,然后后面加值就可以了,值呢也都给列大家列到这了啊,那么常用的呢?还是什么,还是我们的这个简写属性对吧?这回知道第一个什么是我们的动画,动画的名字对吧?然后呢,我们动画完成的时间,然后我们的函数对吧?然后什么我们执延迟的秒数,然还有什么,还有我们动画执行的次数吧,以及其他的这些要求,CR什么要求,就这些要求动画的规少方向啊,频道到底哪一帧呢?对吧,还有这个是运行还是暂停啊,啊就是这个啊好了,那咱们现在会了这个动画以后我们拿这个动画做一个实例,再来巩固一下啊。
43:15
比如说我们来做一个这个幻灯片。Mol monkey。啊,我们做一个这个幻灯片,咱们来看一下啊,这里边是不是有诶这呢,是不是有这几张幻灯片了,对吧,你看啊,大家幻灯播放的看到了吗?哎,我们就把这个拿过来啊,来在这个图像图图像另存为。好,图像另存为到我的桌面计算机C盘。呃,WAP64下边的3W下边CLASS02ONLINE lesson2 OK,这里边我们给他改个名啊,这这名太长,我不记来零点偏记走你然后再来一个。图像另存为。呃,这个叫做。
44:02
1.gpg。再来。图像另存为。然后。二点二点PG。中间一是JPG是吧,这个已经有了,再来一个。这个再来一个来。把它另存为图像。嗯,我从零开始了,然后这个就三三.gpg OK,两个PG,两个JPG啊好了,现在我们就不管它了,完事了,把它搞定,四张图片我给你拿过来了,这个动画呢,我们也完事了,对吧,那我把它也关掉了,关掉以后接下来我们来看好了,在这里边我新建一个。叫做。动画。十几的十二十啊20动画实例。幻灯片。幻灯片。好,那么在这里边不管怎么样,我要有一个什么元素,对吧?Selection,然后在selection里边我可能会放四个image,没错吧,那这image我要引的叫做当前目录,应该是0.png 0.png有这么一张,OK,然后再来还有什么image。
45:10
Src。哎。呃。当前目录1.gpg啊,然后再来。以妹姐。呃,2.png啊,你可以看一下它的每个图片大小都是固定好的,都是2100乘400的啊,然后再来一倍叫做当前目录三三.gpg你看是不是2100乘400,哎,每一张图片大小都是固定好的,好了,那么我有了这四张图片以后,接下来咱们来看啊,我在浏览器里边,我们先来刷新看一眼。你看啊,这个图片太大了,对吧,对于我们来说有点我有点这个用不了这么大啊,那我怎么办?我可以给它先设置一下啊,叫做style标签,我通过标签来设置了select里边的image,给他的这个WT就宽度变成多少呢?1200PX。
46:07
啊,就允许这么大,好了,现在咱们来刷新。OK,现在是不是都是这么大的了,总共几张四张图片对吧,但是我要要我得要干嘛呢?要你看幻灯片是什么样的,你看比如说当前这一张,注意啊,当前这张在这儿,这没问题,然后接下来什么,接下来是不是所有图片都要在这一行上,然后这一张往前走,是不是下一张就往里进,是不是这个意思,哎,所以转办法,我要干嘛呢?给它都放到一行上才可以啊,那这里边我们先来给它清除一下样式啊,Body里边的这个,呃,Pad。为零。然后接也让它为零,OK,那现在完事以后咱来刷新。好了啊,这回咱们看是不是顶到这个角上了,顶到角以后,接下来呢,咱们再去设置这个selection啊呃,一面咱们设置的是一百二了,对吧,那接下来ec select我也要给它设置一下啊,也给它设置为一百二一百二十像素。
47:06
一千二不是一百二啊,然后呢,注意啊,这里边我们先给了个边框包点移项数实现,我让它为黑色是好看一些,能看着啊Gin上下为零,上下为。20左右自动好了,现在我们来看这个select走你当前select克是不是跑跑中间来了对吧?跑中间select克的高度是不是根据里边的元素的高度而去自适应的,那接下来干嘛呢?我让所有的图片都做一个定位啊,都做一个定位,那么要做定位的话,来我先给他的这个部类做一个什么relative绝对定位,相对定位是吧?那所有的图片呢?那就是POS等于什么呀,等于阿。啊,把输入好了,现在你来看找你所有的图片是不是都融合到这这一起了,哎,都融合到这一起了,那咱们说了,我每张图片是不是都要定到后面才可以,对不对,哎,都要给它拉成一个横排,所以咱们来看啊,在这里边secs select下面的以面积冒号first child。
48:02
是不是第一个图片,第一个图片的话,我的这个left我不需要动,那么第二个我要不要动,是不是就要动了,所以这里边我的NTH。杠的括号,第二张图片,第二张图片,我要它干嘛呢?我让他这个。LA,对吧,距离左侧。它是不是要往右去对吧,所以这地方应该是负的吧,负诶不对,往右是正啊,往右是正,正多少呢?正一个1200这个点,因为每张图片的宽度都是1200对不对,那现在你看啊,我第二张图片是不是过来了。看这边是不是接一张图片对吧,那同样再往下来我的第三张呢,Ecf select image冒号MT。NTH杠的第三张,第三张我的life的均应该多少?120再加120是不是二四?零零。对吧,2400,然后再往下selection里边的image冒号NTH-Q的第四张,我是有四张吗?我还是三张,四张OK啊,那四张的话多少是不是就三六了,那就是。
49:04
Left等于3600PX吧,哎,那OK,那现在完事以后咱们来看刷新我的图片是不是都在这后面后面放的,哎,那咱们在哪呢。这后边放了肯定是不好看的,我可以在这里面干嘛设置一个overflow的,还得让他干嘛超出部分都给我隐藏掉,是不是就看不出来了?哎哟,可不是看不出来咋的了。这何止是看不出来啊,是不是我这个注意啊,我这个里边的子元素这些东西都干嘛了,都做了定位了,一旦做定位了,我负元素是不是就感知不到里面的高度了,哎,所以这里边咱们给的强制给个高度啊,高度he I给的多少呢?给了200。200200PX好,那现在咱们再来看啊,走你OK,没问题,有了吧,哎,有了以后,那么接下来咱这图片得动啊,是不是,那我们就写它动呗,咱们来看好了,怎么去写它动,我们去找它这个关键帧啊at k这里边叫什么呢?叫做my banner。
50:02
买半好了,那么当它零的时候我不需要动对吗?百分之。0%的时候,0%的时候我什么都不需要吧,没错吧,哎,因为0%,0%需要动吗?动也行啊,0%就要动吧,动那就干嘛,Left是不是就相当于我要负的往左边走吗?负多少走一次是不是就是1200啊。对不走一次就是1200嘛,或第一次我不动,我就让他0PX对不对,然后再往后,比如到百分之,呃,咱们有四次对吧,那百分之。二十五百分之行了25吧,25%的时候,当走到25%的时候干嘛呢?我的left就让它负,负就会负到负1200,是不是就走出一张图片,那么同样50%的时候呢,50%的时候,我的left是不是还让他负,负多少就会负,呃,二。要2002400吧,2400对吧,然后等到75%的时候,75%的时候啊,这个数给的有点太小了,一会我们可能得调啊,先不管75%的数干嘛呢,我这回再付多少,付这个三六。
51:07
00PX对吧?哎,到最后到100%的时候也行啊,100%的时候left干嘛,Left是不是又为0PX了,哎,是不是又回到第一章了。没错吧,那OK,那现在咱们来看我的动画是不是定义好了,定义好以后咱得让他动啊,让谁动啊,让这个。以魅力图片在动的,所以这里边我给它加一个啊,或者是说我加。行啊,我就加到这个anion里了吧,An,然后哪个动画my my banner my banner是不是my banner。来办OK,然后多长时间执行呢?多长时间完成呢?比如说我让他这个三秒完成吧,啊三秒完成,然后让他匀速啊匀速匀速云速叫什么,云速叫laer吧,好像是。完,我的这个关掉了啊,LESSON02,我们再打开一下我们的这个笔记。
52:03
拉到最下边,我们来看一下它的这个规定的速度啊,规定的速度我们在哪儿,在这里边是有的。这里啊。匀速啊叫LA对吧,那OK,我们还调成匀速。好,那现在我们来看可不可以了啊,在这里边来刷新。注意啊,他走的时候你看走。我的第二张。啊,我所有的这么都都跟他走了,哎,所有的都跟他走了,这样肯定是不行的啊,为什么说所有的走了,你看我left,我给谁,我定义是哪个left呢?不不不错了啊,这呢,0%的时候left 0%的时候是哪个left带走啊,肯定不行吧,所以我这里边既然我有定位好以后,我就不能用left,我可以干嘛呢?Margin al margin杠,Left为零对吧,刚开始是为零,然后接下来呢,ML间margin left为。
53:00
负一千二对吧,我靠money来给它移动Mar marin lab负2400,我是不是打错一个Mar g啊,然后再往后呢,还是一样marn marin刚。Left啊,负5600,诶来个56002400。加一千二三六零零啊3600。然后再来Mar。Go left是不是又为零了?哎,到100的时候又为零了,好,现在再来刷新。走。都你看。也还是有哈,Marin left marin gun left,我这里边的每张图片left的定位我赞啊,这里边先是零着我不动了,然后下一个我给他一千二排成一排没问题对吧,然后一千二再加一千二呢,是2400,距离左侧是2400,距离左侧是2400。距离组成2400,然后我调的时候,我就让他负的往回走,负的往回走是不是也没有问题。
54:05
对吧,哎,负导回走势是没有问题的,那我的怎么回事,那我们看一下啊嗯。这里边。我不应该给这个图片。我不应该给这个图片,这样太麻烦了,我把图片删掉了啊,我不这么给图片了,我怎么给呢?咱们来看这个动画,我还保持的不动啊,这个动画保持不动,然后这个select呢,也没有问题,对吧?没问题,然后这个的话啊,我再重调它一下子,我重调一下,怎么调呢?咱们把它先注册掉了啊,你看好了,我不这么去定位了,这样定位不行啊,我这里边再加一个标签,我用这个标签包含着什么,包含的所有的。一倍,哎,这面的。好了,然后我来控制这个div,知道吧,来控制div啊,那这块这个动画已经写好了,我们就不需要动了,然后这个selection呢。也不需要了。
55:00
因为我不需要给select克ion动了啊,不需要给select动了,好了,Selection就是一个一个这个这个层,那现在咱们来看啊,我现在正常的刷新回来,现在是这样的,对吧?那么接下来我要怎么调呢?咱们来看啊,其他的都没有了啊,其他的都没有了,对吧?接下来我是selection下边的div,我来调这个div div的with它的宽度,它的宽度是多少呢?我们最大的宽度是不是三千六三六零零这个宽度对吧?然后一样高度呢,我就给他200PX。200PX啊好了,现在咱们来看啊。刷新。OK,咱们来看,我先不给他隐藏overflow,先不给他隐藏,然后给他一个B啊,不用给他一个bar bedbd包一项素实现的这个井号,井号井号也是000吧,那这个零零我就不要了啊,注意外什没有000了,我们给里边这个div给个000,咱们来看走你。看啊,我的div。看。
56:00
这是不是那个div,哎,我让所有图片都在div里面,这种没有问题吧,那既然是div变成了这个宽度了,注意div变这个宽度了啊,那么接下来我。里边的image我是不是就可以给它设置一下了,那这image直接float float float left是不是这样就行了,哎,这样不麻烦了啊,这样好做一些来走你。Float left。我图片没给他缩放。来with图片的宽度是1200对吧,然后图片的高度是200。PX好了,现在咱们再来看走你OK都上来了,都上为什么这块没上来啊,因为我这里面设置了这个那什么啊,设置了这一项数的宽度,我把这个宽度去掉还不行,我加四吧,我看啊宽高各加二。这就二,这里面有也为二对吧,哎,我加二也行,或者干嘛,或者我给它设置什么,设置为这个怪格是不是也行啊,那叫做fo杠。
57:08
Size为什么hos X设置为怪一盒?怪一盒的话是不是宽高就不占元素大小范围内了?哎,这个时候再来刷新。好啦。嗯,一下就俩吗。那不对呀,不对呀。我们给3600可不对啊,我总共一个是1200,一千二乘以四,怎么能是360,应该是四八吧,哎,所以这边给的四八啊,四八好。这回再来刷新。OK,这回又上去一个啊,还差一个,还差一个,还是我这个边框还是给他加俩,加俩就能上去准确点啊。走,你OK,这回咱们再来看啊。所有的图片是不是都在这儿了,都在这以后注意这回我在干嘛呢?我在让它的负元素是不是它呀,它的超出部分隐藏是不是就把我div超出的那些东西都隐藏,是不是就这一张啊,哎,然后我移动div就可以了嘛,然后在这个div里边。
58:01
给它加入这个动画叫做AMI,然后叫做MYB,对吧,比如我让他十秒完成长一点,然后呢,Ininite好。呃,其他的还需要吗?其他的不需要了,就这些就可以了啊,那这回这个位置呢,我们是不是得调一下了,第一个的话,你看第一个margin left为零。当零的时候对吧,然后再往后呢。我为。负的1200,然后再往后呢,我会付的2400,然后再往后呢,我会付的3600,等到到负的三千六的时候能看到下一张是吧?那OK,我们来看一眼啊,来刷新。走。诶,一个搞定。两个我设的是匀速,我怎么感觉越来越快呢,三个。好了,三个完事以后是不是退回来,然后再走。然后再走。啊,然后再走。看到了吗?哦,我知道为什么我刚才设的什么是从这个,呃,无限制无限制播放对吧,那OK,我给他加一个什么匀速的叫LA啊,让他匀速走。
59:10
刷新。你看啊,走。两个还有。这匀速走还不行呢,这匀速走的话,是不是一直都都在这走啊,那你看重新刷新一下,重新过来,你看走。一次啊,我可以再加一个啊,我再加一个什么呢?加一个延迟三秒以后执行,延迟三秒以后执行啊,这回你再来看啊,来刷新。你看啊。一次。我要它匀速的话,你看它是一直走了,看到了吗?哎,所以我还真不能给他设置匀速啊,不能给他设置匀速。把它去掉。去掉啊,去掉完之后,这个时候再来刷新,重新来,你看好了走你三秒以后才能走走一次,诶在这停了对吧,再走。又停了,再走。
60:00
又停了,再走走不了了,是不就还原回来还到最后一个了,对不对,哎,还到不是还原,还原到最后一个,这还到什么,还到第一个了吧,哎,还到第一个了啊,这就是咱们给他这个做的这个动画,当然啊,我这里面这几个位置可以再继续调整,我可能再优化,再调整一下会更好一些啊,再再优化一些会更好一些,不是说直接给这几个数值对不对。菜。那咱们就给它优化一下啊,直接给它优化好一点,因为你看现在这里边你看,比如说咱们刷新你看啊走三角以后走。一。到这是第二章对吧,然后到这第三章。到这是第四章看到吗?第四章完事,你看一直往回回回到零看到了吗?因为什么?因为到100%的时候,我是不是给它为零了,哎,所以我们不要这么去设置啊,我给它变一下。我把这几个值啊给它大一点,因为到最后大家知道最后一次我肯定是不需要为零就行了,对吧,因为需要为零的话,是不是它直接往回走了,我们动画什么样的,当我执撑到最后一次,到最后一个100%的时候,我是不是会默认执行完这个以后会回到原点呢,对不对,因为我没有给它设置停到最后一帧嘛,它会回到原点呢,对不对?哎,那回到原点的话,那这里面我们把这个数给调一下吧,比如说这块就别从0%开始了,就直接从百分之就是35%的时候。
61:16
嗯,我是负的一千二对吧,然后35加35呢。70呗,70%的时候,我是付两千四对吧,然后100%的时候,诶,我付3600,正好这几个数对吧?这些东西我全都不要了,就留这三个就够了,那现在咱们来看啊,是不是就有这个班的的效果来刷新一下。你看啊,三秒以后开始执行。一个对吧,然后再往里走。两个对吧,再往里走。三个对吧,再往里走应该不用完事了,看是不是换第一个了,那你看两个。三个。再走第四个,第四个走完之后,马上第一个看到了吗?哎,这样是不是好看一些了,哎,包括我鼠标放上来是不是还可以干嘛,可以让它进行暂停吧,啊比如说这里边放到谁,那放到这个你看动画给了谁对吧,我动画给了谁,是不是给了这div,所以这里面的这个div我可以CTRLC再给它加一个冒号power,当鼠标放上来以后,然后我们找下这个暂停的这个事件叫什么,叫做play s对吧,那也就是。
62:27
杠,我让他干嘛,让他暂停呗,那现在咱们来看在这里边我再来刷新一下啊,他现在等他三秒,他走走了再说走了对吧,走了以后好,这个时候我鼠标放上来,你看动画是不是就暂停了。看到了吗?哎,鼠标拿走它是不是又开始继续播放了。看到了吧,哎,这就是咱们an的动画属性啊,好了,那咱们今天内容就。
我来说两句