49.尚硅谷_css3_复习.wmv原创

来，我们来开始。嗯，全屏了。好嘞。的，我昨天其实我了两大块内容啊，第一块是我们的3D变化是不是啊，OK，第二块就是我们一个什么动画的基础是不是，而且这个动画一般就是型动画啊，OK，我们说CS3S啊，三动画的基础啊，OK，一般你听人家说过渡，它其实也算是一种动画，懂不懂，所以他们一般不叫过度动画，就直接叫过度了啊，Animation的话，他们一般就叫animation动画，或者叫C3动画，一般说的都是我的animation，有没有讲OK，那在讲这个之前，其实我们还提到了一些其他东西，比如说。

百分比是不是，我们说百分比都是什么？我们说百分比，百分比肯定有一个参照物的，百分比都参照于谁，是不是这些有技术难度吗？没有任何技术难度，就是你不熟而已，懂不懂，OK，那我这边我我不帮你们去列了，以后遇到的每一个百分比自己都整理下啊，百分比有好多好多很多属性都是带百分比的，你也不需要每一个都整理，整理下来，用的比较频繁的，把它整理下来懂吗？OK。好，那还有一个就是什么，我们说的什么元素垂直水平居中方案是不是啊，那这个方案现在我们分两波了，第一波什么已知高宽的。

是不是第二波呢，位置高宽。是不是已知高宽这边我们有几种方案了，最起码有三种了，第一种什么通过什么。通过把left right什么left right么全部设置成个零，第二个切记干嘛。Mar一定得是凹，不然会废的是不？当然肯定有一个前片T型，什么I等于什么拜拜，AB是不输是不是？干嘛这三个啊，这叫伪代码。

懂吧，你们面试的时候也可以写这种伪代码，就是跑步起来代码，可是面试官一看就知道什么意思代码。能不能讲OK，其实这里面还有一个很重要的条件是吗？我们说你这个它的包含块必须得是，也就是说你这个元素的包含块一定得是容器是吧，不然也会有问题吧，包含快一定得是。容器能不解啊，这是第一种方法，就是说让你写以垂直计算方案的时候，如果你代码忘了，就写这种伪代码能能解啊，我写伪代码是极其强的，反正就干嘛造本是不是造就是伪代码嘛，懂吗？好，第二步干嘛，我们是什么。也是一样的，干嘛，前面几个条件都样的，马不需要了是不？那跟托应该到50%，你要知道这50%是参照是不是OK，那这边还有还有个什么，这边使用到了我们CR，它是二里面一个特别重要的东西，Mar为负值。

是不是OK marin复制，诶，也就是我们的marin top跟什么marin什么马left要为什么为负的。是吧，自身的一半。是不是OK，这是第一个方法，其实在这边你要跟面试官还得去讲一个东西，讲什么我们绝对定位和木制的特性，是不是绝对定位和模型的特性，是一个什么样的特性。

绝对定位和木子，它有个什么样的特性？你们这个方案你们理解是为什么吗？理解是为什么吗？为什么可以这么做？他问你，你写left right为零这种东西其实不常见的，为什么？为什么可以这么写，他就已经随着水平居中了。它绝对定位和不是我们说现在是不是我们里面那个子元素，我们说么，我们说是不是这样的，外面一层元素啊，里面层元素啊，现在我这么写是不是让这个元素啊。是不是为什么他就可以随时随中了？没有讲为什么吗？绝对定位和是它是有特性的，我们说一个绝对定位和模制的吗？它left加他的2RIGHT加什么加加加等于什么。

等于他包含快的什么，包含快的宽度吧，还呢。他是什么做叫什么。Bo加什么当然加什么面的等于的高度啊，这样他才能随便动啊，你想想现在我们都是零啊是不？外是不是已知的。这个应该也是有知道椅子的吗？看你们多。零啊，是不是啊？那你妈妈给默认值为多少？马给默认值为零啊？你为凹to话，我就不用写了，他们俩的墨置为零啊，懂吗？如果你一开始就只写这几个值为零，是没有任何居动效果的，因为马为凹two，所以说他会把包含块的宽度减去它们的值，让马给平分，一旦平分了，就随置水平居中了。

所以说马是必须的，为什么要显示的去写马啊，因为你的马默认为零啊，所以说我才要写马啊，为什么我不懂，看看是的。啊外是是什么已知高方的嘛，啊这个你知道这是什么，这个方案是因为我决定定位核辐子的特性所什么产生的，对不对，这叫CSS的奇引什么。起引技巧是不是，反正就是什么，就是本身这个东西造出来不是为了去动作的，可是发现我们干嘛。发现我们可以是干嘛曲线救活，巧妙的就让它干嘛垂直水平居中了，能不讲啊，这种方案问你为什么是说你一定要知道啊，啊你不能说我记一个方案就行啊，这这是不对的，这不是一个好的学习态度啊，你你得之前啊，之前所以然能不能理解，OK，那下面这个应该比较好讲，这个这个应该都比较懂，是不是OK，那我们昨天是不是介绍一种新的通过什么。

其实还是一样的，这边还是一样的。前面是一样的。是，只不过最终我干嘛通过什么全是吗？干嘛我通过春风我去变他的什么全是类可以写在D是不是？我们说什么负的50%，你要知道这边的百分比就是承受一直生的，而且这组上面一定要写零是不是？OK，那这个跟面试官说一下就行了，那这时我们说已知高宽的什么。元素的垂直水平驱动是不是位置客观呢？就是这种。

就这种那么讲位置高分的话，除非我们今天讲的等等，那其实这边其实第四个方案就是通过我的。Le是不是这边第二种话呢，也是通过的，那我们今天来讲对不讲OK，当然还有table table这个不要用了。不可能再用tablecel去做，水平特是居中了，你也不可能发现有有table类型的布局，除非你这项目是什么，2000年以前的，懂吗？好，OKOK，那其实还有一个就是什么image元素，1IMAGE元素如何？懂吗？垂直水平矩重。OK，这我们也讲过，其实通过什么，其实就是干嘛，我我听回来嘛，就跟我的期限有关吗？是吧，这个饭我们也讲过了，这我就不在追述了，讲OK那这个。

面试当中经常会问到这个很考察你CSL2的基本功怎么样啊，掌握的有没有深度，还是说只是制造下癌合合伙，形式上懂不懂，这才是我们经常在项目当中是为先布局技巧啊，掌握它OK，那这是我们昨天说的一些东西吧，是不是OK？那昨天还有什么其他的需要补充的吗？在讲他们俩之前。想想还有吗？看一下吧。应该没有了。是不是昨天就讲了一个全在性的一个高亮吗？是不是OK。好，应该没有了，那是不是就直接讲3D变化了，那3D变换这一块我们说干嘛？哎帮大家去捋一捋这个API是不是我们3D变化这一块啊，咱们现在不是按照我思啊，就我们已经学过一遍了，知道里面哪些东西比较重要的吧，OK，比较重要的是谁，谨慎是不是谨慎肯定是比较重要的，还有还有什么，其实就是这三个属性体系重要。

是吧，也就是说3D变换里面这三个属性你要搞搞懂分别是干嘛的。这个能理讲OK，这边这个A片简不简单。简不简单，这三个应该简吧，就是把二变化变成了三变化吗？他上面的坑跟什么二变化是一样的，他也是给组合的，那不讲啊，这我就不讲了，那讲那最需要注意的是我们3D平行时内组上面那个百分比的问题，那不讲OK，那其实3D里面比较难的就是他。懂吗？OK，来看一下，我们说这里面其实还是叫概念，就是说面点是不是，我们说紧身的写法有几种，两种写法，记住两种写法是不是好，你跟他说，哎，仅剩有两种写法，诶但是诶还有种写法怎怎么样，你说全是分母里面有个什么不是函数是不是，而且这个函数必须在重form母的第一位是不是，哎，那这个人不错，对AP嘛，掌握的极其的详细，及其的时候对不懂，你可以告诉他这种方式我们经常不用，为什么不用。

啊，因为放在全部里面了，第一个不好操作是不是，第二个你干嘛，你这种形式的话，是不是只能作用于本身元素上的，我是不是可以在外面直接写一个属性，直接按它什么作用于素它的后代元素的，所以说我们这个不属性更常用啊，懂吗？你这么一说的话，你跟你跟别人去阐述这个东西的话，完全就是两样的，能理解啊，你的理解更深么？懂吗？OK，我们说记住两种写法，一种是什么CSS属性，一种是什么？一种是圈圈风属性的一个变化。函数，而且这么写的话，它必须在必须在第一位，懂吗？OK，两种写法啊，可是有有时候他确实也是有用处的，比如说在我所有的这个元素当中，有些底层就是不一样的，那你是不是可以单独给它指定指令，那么讲，可是你知道底层有一个叠加问题，懂吗？OK。

好两种写法，是不是我们说紧身是干嘛的？其实我们把紧身跟面点放在一块做紧身是干嘛的？紧身吗？紧身的作用？干嘛，他干嘛。好紧身的写法。好景身的作用，景身作用是干嘛的？控制什么，其实就是么，营造3D舞台的是吧？肯定是营造3D舞台的吧，OK，他是用来构建3D舞台的，是不是在构建3D舞台的时候，我们是什么，它起什么作用，是不是让用户的决定什么？

决定用户的什么肉眼距离屏幕的好，请在该写水平距离。是不是水平距离是不是斜子，是不是靠谨慎几点呢？那么你讲OK，我们什么构建3D5台，决定用户热点距离屏幕的水平距离是不是好使3D变化的元素干嘛？是3D变换的元素，具有近大远小的感觉，近大圆小的感觉，这是景深的一个作用，是不是？OK，说下景深跟面点的关系。

对吧，景深越大面点景深越大面点越什么面点越景深越大面点越远，是不是元素变形越小，是不是景深越小面点越近。元素面形音乐杠是不是这样的，OK，我们说是景深跟面点的关系，面点是什么应该知道，是不是我们说紧深和面点的关系是不是OK，那讲完这个之后呢，我们说什么景深什么。我们说你有一个叫什么景深几点，是不是还有什么。

除了景深几点之外，景身上还需要注意什么？景深点一下是吧，而且得知道景深是一个。不可继承属性。景身是一个不可继承属性，蛋汤可以作用于什么所有的后的元素，OK，那你跟人家聊谨慎的时候，这些东西你能不能回忆起来，能不能形，能不能形成一个体系啊，你不要说上课我听懂了，那就是会了啊，远的。懂不懂，你要把它能很好的表达出来，那才叫学会了，懂吗？所以以后中午你如果没有什么，想不出什么比较好的分享，你就把一个自己的基础技能体系跟大家去分享一下也是可以的，能没理讲OK，那这是我们谨慎的体系啊，然后我们说什么全子薄膜。

撕掉，那这两个东西我就不再去给你们扩展了，能不能讲我应该写出来，你们应该就懂，不对我在说什么，能不能理讲OK，那全部撕掉的这个吗。这是干嘛，这这是用来干嘛的，他也是用来干嘛。的作用吗？的作用，他干嘛也是用来构建3D舞台的，是不是，他干嘛，他是3D舞台，有一个是3D舞台有一个层次感，有层次感是不是OK，我们说你要知道transform上的一个它，它的一个坑，它是一个。不可继承属性，它只作于是一个不可继承属性，它只作用于运数。

所以说我们在写的时候的话，你如果想让一个3D的元素有这个层次感的话，你必须得排查一下它的直接腹肌有没有全部和什么3D的这个属性能没讲没有的话，它是没有3D这种层次感的，只是有一个进大的感觉啊，懂不懂，OK，那我们再来说这个big来干嘛。贝贝来干嘛的？OK，我们说他是用来干嘛隐藏隐藏元素背面是不是？OK我们说来说一下，我说吧，一个元素分两面是不是啊，但并不意味元素有厚度。意味这里面讲一个元素本身应该在该讲一个元素就是分两面的这个反面啊，但并不意味着元素有厚度，在一个状态下干嘛元说只能干嘛。

展现自己的一面什么意思？虽然说一个元素是分两面的，可是在我们现在当中，是不是他只有机会展现自己的一面等等，那这个一面如果被隐藏起来了，那这个元素就已经被了。隐藏掉了等等，并不是说我把它的背面隐藏掉了，他还有正面，不是这样的一个状态，他只能显示一面，背面隐藏掉了，那就干嘛这个元素叫没有了，就被隐藏掉了啊，不是说背面隐藏掉了，他正面还在，并不是这样的，懂不道，所以说你你没发现我们昨天在做那个3D盒子的时候，背面虽然说隐藏掉了，可是你发现转过来的时候，正面是不是还在。

能不能理解？我就说一个元素分两面，但并不意味着这个元素有厚度，因为在一个状态底下，元素只能展现自己的一面。能不能理解这句话，OK。好，OK，那这是我们昨天讲的什么3D的技术点，这三个最重要，其他的我感觉大家都应该会。能理解，OK，然后我们做了立方体，是不是做了三棱柱，做了多棱柱啊，那这些都是对这些技术的一个运用，能理解吗？OK，那这个时候的话，就看你们怎么去整理自己的体系啊，懂不懂啊，比如说哎，我可以给你说一下，哎，我做过一个什么立方体啊，我是怎么做的是不是，可是我感觉跟面试官说这种东西就有点漏了，懂吗？你说这些技术点的理理解的话，我觉得一点都不漏是吧，你要告告诉面试官，你是怎么去做一个立方体的，说实话我不是很建议。啊，因为这个地方你实在太多了啊，你要是我们最后讲完这个3D家居啊，你跟面试官说你怎么做一张内景图的啊，怎么怎么做一张内景图，怎么做重3D的一种展示的，那我觉得还可以，是不是你说出一个立方体，那实在是有点多，懂吗？啊，这是技术点说出来，哎，一点都不弱，懂不懂啊，有自己的思想，有自己的理解，你如果不不说这些技术点，光说一个三三级立方体啊，你选择说DEMO，你不选择说这些技术的细节，那我觉得这个效果就是正好一个反差。

懂吗？OK，好，那讲完这个之后，我们做完DEMO之后的话，是不是就去讲C3了，C3动画了，OK，那C3动画其实我们昨天采了一个踩了个step的坑，你记不记得好像这个step是好像是不是稍微稍微稍微有点烦啊，是不是，那那昨天晚上我给大家去画两张图，但我们把这个step是好好的来理解理解懂不懂，虽然说这两个东西用的并不多啊，可是在我们的项目里面，在我们DEMO里面我还是用了，懂吗？啊，所以说有必要跟你们去讲一讲，OK。好，那C3动画这一块，我们来说C3动画OK，好，那这个课件是不是就可以关了，关掉，好，那我们来说动画稍微再来复习一下。

OK，那这个动画复习的时候，是不是就把每一个数形干嘛拎过来呗，看看你自己能不能干嘛，写点解释呗，是不是name是什么。代表什么？动画属性的名称是不是代表什么？关键真的是不是。如果第一个关键字。如何第一个关键字，关键字的语法是吧，艾开头是吧，然后是动画的名字是不是这是叫关键帧的选择性，可以写符跟to这种关键字，也可以写百分比代表的是什么时间点。并不是代表你元素移动的位置，或者说移动的变换的点是时间点，记住里面写的都是我们在CSS里面注册过的CS声明，且其他声明是废的，那边讲OK。

好，那这是我们说什么关键层。OK啊，你千万不要有一种感觉，一种什么样的感觉啊，我第二天讲复习的时候搞，搞得你发自己第一天就是从来没有学过一样，一旦你有这种感觉，说明你前天晚上没有做好，懂吗？我第二天复习的时候你是比较顺的啊，说明前天晚上工作做好了啊，OK any面型name然讲anim就行了吗？肯定不行，我们什么anim是不是这这个代表什么。OK，理解要深刻一点了，代表是一个周期是吧？一个动画周期的时长，什么叫一个动画周期的时长？就是你这个关键帧吧。

还是说我们整个过程装导图到装图啊，整个是我这个周期啊。是不是一个过程从到two，或者从two到一次这么长，是这样一个动画周期的时长嘛，懂不懂，因为我这个动画周期是可以被。循环的能理解吗？OK，好，那再来看我们说这个单位，一单单位，我们说你反正写到动物二人知道给我必须加上单位，你也给我加上单位，懂不懂你就不要管这个在我人你微信里面加不加单位，会不会出问你这件事情了，反正你知道写动画就加单位就对了，懂吗？OKOK，然后呢，我们讲了anim timing function是不是好，OKN他你干嘛对它的理解也要深一点，它干嘛代表着什么作用于一个关键帧周期，而非整个动画周期，一个动画周期叫到two，一个关键帧周期呢？

如果我只有方上倒图，问你上倒图是不是一个关键的周线，是啊，可是我这里边可以写百分比的是吧？0%~1%是不是一个关键的周期啊是。能不能讲，那我这个他平方就是作用一个关键证周期，而被整个动画周期的能没讲，OK，好走你。哎，你们先是不这干嘛。代表什么？代表？动画的延迟，是不是这里面有个很重要概念，这是一个动画Y的属性，是不是你要把动画能理解成这样啊，我觉得已经很牛逼了，能不理解好再走？

好，我们说还有什么看吧，干嘛循环关键帧的次数，循环的是不是关键帧是不是，他只管什么，只会会管理动画内的属性，说直接一点干嘛，也就什么动画延迟，不会败循环。那不讲，OK，那还有什么，哎，你们行什么吧，这个属性只有四个是不是啊，这个我就不说了，比较简单了，能不能理解啊，OK，那这个什么。改变什么？改变动画执行的，动画执行的方向，是不是那说的稍微土一点，就是干嘛改变。

关键增的执行方向是样的，是不是样的，本来你是退到到吐的吗？我不对，刚刚我们说有四个是不是，他这个看是干嘛循环次数吧，是不是，我们说有四个是你写什么。有吗？是不是OK，我们说他是用来改变关键的执行方向嘛，是不有四个字啊，是不是OK，那还能干嘛。还会影响什么？And明function的形式。是不是本来你是加速的，我只要一变，如果死了之后，那就是给减速了。

是不是这个道理啊，OK，那这是我们讲的，哎，你没写点是不是，那还有什么。你model OK来干嘛的？管理所有什么动画外的状态，是不是OK，那这个我们讲讲什么叫动画外的状态，什么是画。外的状态一共有几个不让之前就之后，是不是其实我们这个延迟就是算什么。之前能讲他有几个值。啊，这个值我们得说说他几个字啊，三个字是不有个叫什么啊，他其实还有默叫闹嘛，那就干嘛不管呗，对不到那其他三个字，一个叫什么back。

默认是什么？默认是懂吧，OK，那把这个过来LC懂吗？这个说我说你动画外的状态是是是一个什么样状态。动画的状态干嘛保持在动画之前？是不是，是不是OK是什么。让之前的状态，之前的状态，保持之前的状态与状态。没有听错吧，OK，保持一致是不是他呢？之后的状态与错的状态保持一致是不是boss呢，是不是，是不是干嘛我们说不知道之前跟什么动画外的状态。

与什么之前与和。和的状态保持。吐的状态保持一致是这样的，好，那这个东西得搞清楚啊，一般我觉得的这个东西并不是太多人知道懂懂啊，理解这些属性的大绝大多数都停留在了API层面，懂不懂，其实我们是挖的比较深了，所以说给你们讲的这些东西啊，第一个。

准备的时候是有代价的，你们吸收的时候也是有代价的啊，作用只有一个，想让你们在面试的时候能把它发挥出来，就是你不整理我们做的所有的工作，全部都是费用啊，你最终干嘛，这些东西你说不出来啊，我懂我懂，可是我就是表达不出来，那我告诉你，那你学的这些东西就是废的，你还不如记下一篇呢，学的多轻松啊。懂吗？那既然给你讲了，你就把这些东西吸收好，吸收不好，我跟你讲，你可能可能就是第一自己没学会啊，我花了那么多的那么大的代价，讲了那么多东西，你可能，哎，我没学会啊，你说我会用，可是我学学不会啊，面试的时候我说不出来啊，那等于废脑懂不懂，所以你想把这个东西发挥到它百分百的作用，但必须整理好，你能说出来。而且要说的很顺啊，一个点什么，一个点什么啊，为什么我要用这个视频，这个视频能帮我带来什么啊，这些都是你们要去整理的东西啊OK，那最后我们讲这个事情比较简单是吗。Animation play。是不是OK，我们知道嘛，管理什么，管理动画的什么运行和停止嘛，是吧，那这些措词你们都可以换啊，是吧，是换成自己比较熟的嘛，懂吗？OK，那最后我们说一下这个关键针。

是不是啊，OK，这边是不是简单的说一下关键字啊，那最终这个关键帧在这边，我们再来说一下，那关键帧这一块我们是什么，这个东西可以是什么。可以是关键字，可以是关键字，什么和就。啊，代表什么0%，OK two代表什么100%。是不是，当然你也可以写什么，可以是百分比等等，写百分比的时候，你要记住这这些这个代表什么东西。

这个代这个代表什么？代表的是是时间的百分比，是不是简单的认为，你可以认为它就是代表时间点。懂吗？啊，时间。OK，能不讲，OK，我们说这个声明我就不讲了，什么是CS声明，应该懂吗？C属性跟属性值的见值，对叫C声明，懂吧，OK，那讲到这一块，其实我们说差不多了，是不是好，那动画当中帮大家去补充一个东西，不是我们昨天讲到的什么steps吧，是不是还有一个在这边，大家想我们这边是不是指定关键帧的次数的，我们说昨天我们讲一次两次三次吧，那能不能循环的给他去指定啊，它有个值啊，昨天我不知道为什么这些值都没有了，现在我帮你们已经加上去了，懂吧，是吧，S的话，它可以指定什么。

播放的次数嘛，不可为负值嘛，也可以指定嘛，你分下无限循环这个动画懂不懂啊，这个稍微提一下，这个没有昨天没有跟大家去提到，懂吗？比较简单吗？这个东西。这我们待会来看一下嘛，反正我们也会用到是吧，你看嘛，昨天我们在写动画的时候。在写动画的时候，大家想我们昨天在这边去写动画的时候，你看我这个看是不是一啊，是不是，你看他是不是只转一次啊。上也不需要我出发吧，只赚一次吧，来看一下我能不能一分。你比如说我这个延迟我先零秒不要了，是不是周期我快1.1秒来看一下。一分的一次两次，三次四次五次，一直在转吗？啊，这个嘛，这就不会停下来了，懂吗？OK，这叫一分量，是不是相当于我们在开这个循环提示器里面对全台性去做一些控制，是不是可以减少我们大量的GS代码，懂吗？OK。

好，那到这一块好，我们说完了复习。