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

再来，我们来看一下周三的时候我们都讲了些啥。OK，好，我们来个复习。稍微的回一下。没有。你的苹果咋这么嗨？嗯。对。没了。还没有，有吗，现在。我们看一下。对，零三，我们来回忆一下周三时我们都做了些啥，其实周三我们就做了两块内容啊，一块是什么啊，一块是全三性是不是啊，国度还有一块就是说2D的全泵是不是好，那今天我们要涉及3D的全功笔及动画的一些基础知识啊，OK，那我们首先来读一下啊，过渡这一块，OK，过渡这一块其实我们提了很多点的概念，是不是？OK，我们来看一下过渡这一块啊，其实最重要就这四个属性嘛，以及一个间接属性嘛，是吧？OK，我们说transition property是用来干嘛的？

他他来干嘛的，指定什么指定过度，指定过渡的是什么属性，是不是好，我想问大家一下，就是这个过渡是不是算动画力种啊。是不是等会总还有一件事情，我们在讲过度的时候，我们有说过控制过度里面的每一帧吗？有没有API是可以控制到过渡里面每一帧的，我们是不是只关关注初始状态跟最终状态，然后我们说给你设设置什么全三星是不是OK，我们说干嘛只要有了这两个属性，其实我们就过渡就能出来，是不是这是指定什么。

指定过渡动画的时间是不是OK，那我们说指定过渡动画的。属性是不是OK，这里面有一个很重要的概念，其实刚刚已经提出来了，我们在课上没有说啊，来看一下我们说过渡，我们是不是讲了两个坑啊啊，这个时候给大家去去提过渡第三个坑啊，虽然说没有任何代码的实力，可是这个坑啊，会限制我们一些功能啊，到后期做项目时候大家就知道了啊，我们说什么过度动画的嘛，过度只关心什么。元素的初始状态和结束状态啊，没有什么没有方法，或者说什么没有就没方法吧，没有方法。

方法可以获取到什么过渡中啊元素啊，获取到什么元素，在过渡中每一帧的。状态OK，也就是什么我的过度，哎，比如说我们是调整位置的，告诉我起始位置在哪，最终位置在哪，然后干嘛让你过渡干嘛过去就行了，里面的每一帧状态我们是没有办法去。控制的懂的，OK，记住它这个应该很简单，因为我压根没有讲到什么，我们说怎么去控制过渡动画中的每一帧嘛，他也没有办法去控制动画中的美帧，这是它的一个缺陷，懂吗？OK。好，那其实那反正已经讲到这一块了，我们把过渡上三个坑全部都理了吧，第二坑是什么？

什么我们说什么元素在初始什么出出是什么渲染还没有完成。还没有结束的时候吧，还没有结束的时候是没有办法，干吗触发过渡的是不是OK，第三点呢啊，这是比较重要的三点看点什么对我们说什么在变换样式的切换式，是不是在变换样式的切换式，懂吗？应该是在绝大多数变换样式切换时啊，为什么说其实有些样式切换干嘛？

有，有些变换式切换干嘛是没有问题的，可是在绝大部分啊，我们什么在绝大部分变换样式的切换时，干嘛变换组合的个数或顺序也可以叫位置不一样时，那吗是没有办法处罚过度的啊，这跟他底层矩阵运矩阵运算这个形式有关系，懂不懂？OK，那记住这两点啊，记住这三点啊，这是过渡上的三个坑啊，以后我们在写项目时候的话，我们一直会踩到这些坑啊OK，那这是我们说三个坑，那你说了一个全身不不解说一个全心吗？啊这两个里面也需要大家注意两个地方，我们说干嘛并不是所有的属性都可以动画是不是，我们是不是有一个可动画属性列表的是不是，OK这边呢，我们说零也要。

少在单位是不啊，OK，你比如说零秒或者什么1000毫秒是不是啊，随意你OK，那这是我们说什么他身上的两个坑，然后呢，说了全之后，我们又说什么全三啊，全三形，Tell me，方形这些干嘛指定什么。过渡动画的形式。OK，那在这一块问题在指定过渡的话，形式这一块，其实我们说最最重要的是一个什么比事是不是啊，你要理解贝赛尔到底是个什么样形式啊，具体东西我们不去过了啊，稍微提一提是不是，那这里面还有一些其他的关键字，默认是什么？是不是先？加速后减速是不是这样的，你看我们说默认是不是一人先加速后点数，只不过这个程度是不是要比这个程度来的稍微低一点，是不是OK，那后来说一个延迟全三星给对是不是OK，这是指定过度动画的延迟时间。

OK，指定过渡对话对吧，延迟是不是好，最终说了一个简写属性。全三形啊，这个间歇属性我们说的嘛，啊，这个间接属性就是上面四个指定什么组合的，可是他有一个需要大家注意的地方，什么第一个，第一个可以被解析成什么时间的值会。付给谁全三形圆形啊，这个点注意一下就行了，知个啊这叫熟悉API啊OK好，那我们这什么说的一个过渡是不是，那这一个反正我们有时间，我们再来做个什么过渡的一个案例啊，可能昨天没啊，前天没在去做，我们说在过渡这块，是不是我们没有为单独去过度去。

做一些东西啊，是不是OK，那我们做一个按钮的高亮啊，这里面我们可以看到一些东西啊，零一杠还是过渡and什么。变化OK啊，来做个什么东西啊，大家看啊，其实我科技里面有。啊，过度这一块是不是有个按钮高亮。是这种高亮的按钮嘛，是不是，其实我们经常看到看到这种效果吧，啊，那你想想这种效果怎么做啊，把它关了吧。为什么关了呢？我要重新开个店啊，开。嗯，不要开这个浏览器容易卡。好，开。OK，做这个东西，这个有没有思路啊，其实里面是不是有意义什么的啊，他还是不是水质水平居中的啊，这边这个居中方案我还得给你们提一种，之前有没有学过，之前咱们学的居中方案是不是都是必须要。

要已知元素的高宽档。未知元素高分的你能居中吗法？啊，一个未知高宽的一个元素，怎么样的居中。莱克斯，莱克你们学了是吗？啊，莱克斯其实并不是那么友好，你要让他做垂直都没没这么友好，你要你要干嘛，你要整个布局都是用flex写的，那确实比较容易，那我压根都不是以Le的布局为什么为我的主流布局的，因为大家知道现在现在你的就是网页变写当中，布局用的最多的还是浮动啊浮动定位这个时候一个元一个未知播放的元素怎么垂直随不居中是不啊，OK，那我们把在这个案例里面，我们把这件事情我们稍微说一说，OK，那首先我说这个高能按钮啊，看到它有，看到它有没有什么思路，亲不亲切吧。

听见了吧，你写写写嘛是不是。零一什么我们说按钮高亮，OK，这里按钮高亮吧，OK，那肯定得有个按钮么，是不是按钮一般叫什么button，其实啊，像这种东西就是其实就是个div标，OK啊，其实A标签更好，是不是A标签更好，那那个A标签吧，E接V。接AVA c pd是不是OK，冒号分号只有你OK，比如说这叫什么home OK，我们说A标签是一个什么类型的元素啊？怎么看A标签是个什么类型的元素啊，你看这边我们说是不是有个样式啊，呃，我找一找样式这一块只你你看后面是不是有个computer，是不是完全的意思吧，点开了嘛，这里面就是它所有的属性嘛，是不是看到它的display。

Abcd这个不需要去记，看一下就行了，音量你要把这些属性全部记下来。你玩吧，反正我不玩啊，OK，好这个嘛，切记啊，像这些C3属性的属性值，你没有办法全部记下来了啊，你说你做笔记的时候抄一遍，那倒是可以的啊，加强一下印象，你说你要记下来背下来。你又不是学语文，你懂吗？这边会有很这边是有很好很好的浏览器的一个渲染，其实给你看到的懂吗？OK。好，那我们说把它搞得大一点好马in给它零，肯定给他零干掉是不是OK，那这个A标签是他OK，现在你看我们说他身上的tax是什么DEC嘛，先给你干掉啊，为什么no是不是，然后呢，没有了是不是颜色是不是要换一换。

白色的，哎，不不不，默认是白白颜色的吧，那就是color应该是外上是吧，OK，白颜色的一个看了吧。啊，没问题啊，这个A标签的高度可能稍微大一点吗？是不是，嗯，A标签你能设置个分吗？不能，Display是不是，OK display like为。200PX开头为50PX来个背景，应该是灰色吧，给看一下现在长什么样？有点丑啊，我们这个太大了吧，我看看我看看它是多大。

啊，这个记不住啊，看它的和模型。58成员。60乘以30的其实就是啊，我给个60乘以30是不是OK 60乘以30的好只你是不是这样的啊，好让它居中吧，Text alone等于。Center是不是，然后呢，然为30是不是，OK，走你。啊，应该有个边框，好，Border e PX的实心是不是OK，最好是BOOKS3为border books啊，一般都是这种类型的OK。啊，应该是有看到黑色边框吗。我是没看到两像素吧。

它那个边框长的。没有加盐生，我应该黑色是不是？那就看一下嘛，怎么渲染了吗？白色默认变成白色，我看了能到变化颜色。对标肯定比较特殊，那不管了，好吧，直接来个是不是OK是不是不过来了，就是这个EPX说的什么black吧，是不是，其实我们这边可以看到，其实浏器在渲染输可能会稍微有点问题。你看我们看这个脖子。是不是在这款，你看我保存一下刷一下。没有颜色吧，打开来看一下郭德纲。继承了是不是默认是不是继承的。

继承了玻璃的，继承玻璃啊，他他还能继承谁啊，是不是看他的波段。我的看了没，你看是不是黑颜色是不。问题是继承的可能是我们对这个A标签的代理，是不是不是里面会有会有一些。颜色的控制啊是吧，反正你如果是个div的话，肯定不会有问题，看一下走你是吧，啊，你如果是个div的话，肯定不会有问题。D。Color了也是继承的吧，继承什么颜色啊？去哪继承啊，是我这个卡了有问题吗？

啊，是这个color了造造成的吧，是不好像这个color了也能影响到什么，不是color了吧？啊，这个没有踩过坑，这个自己注意一下就行了啊OK，那我们这边干嘛给它定时吧，OK啊，4S的水还是比较深的，OK标签OOK我们来看一下，那这边就是什么给一个黑颜色的是不是OK，给了黑颜色之后好是不是就过来了，现在我是不是得让它垂直水平居中啊，是不是OK，那现在是一个什么什么样的方案让他垂直水平去住啊，它字好像加粗的。方特。Wait是不是给加个。好。是不是行吗？现在啊，他有S根吧，确实可以吧，是不是啊，所以这边我们再来教大家一种方案啊，如果你位置高宽怎么办，是不是啊，比如说现在我不让它有高宽，不让不让它有高宽的话，应该是靠内容增开来的，是不是OK，那这种元素怎么去，怎么去里面去装。

首先你的还是是不是让你的left为50%，呃，Top也为50%，问你这个百分比相当于谁的啊？处理八坏的是八的什么东西啊？Left跟top参照的是处理包括的什么东西啊，现在。这个穿对于他的快吗？这个穿在出高吗？记不记得，所以说你看它现在是不是在我整个四数水方方不是四方大小的矩形吗？你看那这边其实就是正好它的一半，是不是这边正好是它的一半，它才会到这个点。能讲，所以说百分比乘着一是处处高分吗？高分吧，他有居中吗，现在。

有吗？没有，只是说这个点正好在居中的这个什么位置上，你还得往上走自己的一半，可是这个时候尴尬了。是不是我不知道这个元元高宽上去是不？我们说之前我们知道报的话，我们在这边是算了一下马马的为什么负的30伏的15是不是就上去了，问题是我现在是位置高宽的水。催民水石居中啊，是不是？那怎么办啊？记住，我们学了一个叫全石。是不是我们说里面有个叫全类，是不是类里面可以写两个字，一个是X轴的，一个是外轴的，OK，这里面的百分比参照的是自身的宽高，所以上去垂直水平居中，能没讲好，这是未知高宽，一个元素垂直水平居中的方案，面试的时候听好人家的问题啊，它有前提条件的，让你做一个元素的垂直水平，就是它会告诉你已知高宽或未知高宽，给的方案是不一样的。

能不能解，OK，那其实你以直高方这种方向他也能做。看见没有啊，只不过这种方案有一个不好的地方，就是说全部的兼容性不高啊，都是有缺陷的，所以说为什么我们有这样一句话，我们说我们人类是不是可以成功的把人送上月球了啊，可是我们在CSS里面还是没有完美的办法去实现元素的垂直水平居中，懂吗？OK，就是你没有一个方案是干嘛能够把所有元素的垂直水平就是给做好的，懂不懂？所以说具体场景具体分析，哪种方案好就行，哪种方案啊，OK。好，切记这个百分比乘到乙元素本身啊，OK，好说一下，那我问你啊，拉德跟特是乘着一波规的啊。这是宽，这高吧，记得我们说过外啊，不是参照的都是你包含块的宽度，参照你是包含块的高度，也就是hat top参照的是包含块的高度吧，是不是我们这边稍微写一写，我问什么这个top。

还有什么H是吧，他们俩是干嘛，参照他们什么百分比，参照于包含快的高度是不是OK，然后呢，我们说这个什么。呃，我们有是不是啊，其实最前面应该是left left是吧，就记住它leftin。什么鬼哦，还有什么？PA定是不是，还有这个是不是他们的百分比参照，一是不含快的宽度，OK，还有我们说什么今天刚刚学的translate。

百分比。百分比参照于自身的。宽高是不是OK，还有一个我们学过的里面的。光的光的什么？它的百分比相当于什么？图片区域，图片区域干嘛减，减去图片的位图像素是不是啊，这些是需要你记得。

啊，这个是需要你记住的啊，你刚刚我们说的这些什么属性值什么呢？其实你你一个元素到底是不是内力元素，这种在浏览器里面都是可以看到的，这种在浏览器里面是看不到的，那就需要你记了懂不懂，而且这个还不完，不完整以后自己遇到了百分比问题就填进来，遇到百分比百分比问题就填进来，最终应该会有一张表出来，懂不懂百分比怎么看，要么自己去测，要么上MDN去查懂不懂，那以后这种API的事情我们就不再提了。啊，自己把它整理好懂不懂，OK，好，那我们来看一下，那其实是不是就出来了，那出来之后其实现在就简单了，就在A标签干嘛，后背上去时候吧，是不是A标签后面上去的时候，那要干嘛。背景变成白色，颜色变成黑色的是不？那是什么他的白光的要变成。

什么白色是不是我们说这个是一个可可通话的主线，是不是color应该变成黑色，是不是这样的，OK，我们说他应该要有个过渡吧，不然是没有效果，只有你上来你看。一闪而过的吧，好像是，是不是给他一个过渡吧，让他来一个全三形TM。选三星我们给个嗯一秒是不是有点少，给个两秒，我们可以看看到这个效果吧，周年。是不是有了，是不是，当然你也可以给个2000。2000秒毫秒。是不是有了o okok，好，那这就是我们讲的一个估度啊，这里面最主要的是这个百分比，这个垂直居中的一个方案，懂不懂OK啊，因为把这个知识体系掌握的饱满一点，像刚刚这种是吧，边框的颜色会被看的时候影响到啊，这个东西不要记这个就是负担了，懂不懂没有一就你颜色没出来，你加一个呗，懂不懂啊，这种问题就不要记它了啊，这种问题记的话就是累赘负担懂不懂就你你遇到的时候，你知道肯定是被其他属性所有影响到了，那我干嘛。

显示的指定一个码懂吗？OK这种东西没办法啊，这个这个必须要记OK。好，那这是我们讲的过渡是不是OK，那讲完过渡，其实下午开始我们就翻篇了，讲什么2D变变形，也叫2D变换，OK 2d变换这一块其实我们讲了讲了多少点。哦，不对，这边还有呢，哎呀，完蛋，孤独这边还有东西是是啊，这个值的列表我就不说了，是不是这个值的列表，我们说有时重复列表的，有有时使用默认值的，其实跟跟时间有关的，就是重复啊列表的是不是跟关键词有关的，就是啊重复那个值的嘛，默认值的嘛，它面方式里面是不是后面，如果你这个列表短的话，是不都是一的啊能不理解，OK啊，这又是一个点，OK，那还有一个点什么，有一个有一个叫什么全三星。

N的事件是不是这个事件我们说什么？这个事件在什么，在每个什么，在每个什么，它是一个元素维度的概念，还是一个属性维度的概念？属性维度的概念是在每个属性完成过渡时都会干嘛，都会触发。这个事件是不是啊，OK，我们说什么这个全三性N的事件，而且它要通过记住它是通过动二形式绑的啊，你如果O全按，你看有没有应该没有的啊，OK，它是通过动漫形式来绑的啊，当属性值列表不一样时，我们吧跟什么。

时间有关的，跟时间有关的重复列表是不是跟什么。跟其实就是跟什么，就是跟只有他一个吧，就什么全三一他们的嘛，是什么使用默认值啊，这个就他就行了啊，这是全三星里面，你们以后看的时候要每一天都有什么回顾的东西等等啊，按照我的经验，你不看你就会忘啊，看个一个礼拜啊，每每天早上过来把这些数据只看个礼拜啊，回一下他的坑，那基本上就能记住啊，OK，那。然后我们再到2D变化啊，特别想讲2D变化，来看一下2D变化这一块，其实我们也讲了好多东西。啊，我什么旋转平移斜斜缩方法是不是OK，那这些东西都比较简单，是不是我们说流体的代表着什么，旋转是不是还有什么。

Transl啊，代表的是平移，好，我这边问个问题啊，我们说平移不用trans，错误们CS2里面是不是也有啊，那top不是也能做，那为什么C3我还要第一个圈全是对的出来。C3D的属性，要么就是为了提高性能，要么就是为了提高交互，是不是啊，他现在故意在做一个全的属性出来说明。Left top的性能就是不高的，是不是，我是不是造了一个trans，它XY是不是跟left差不多的，可是我的性能要比你高很多等等。好，你们可以记住，Translate其实在很多时候是不会从触发重重新布局的。啊，那这个不用记，大概先有个印象啊，最后我们讲CSS性能的时候，我会来讲懂懂OK，好，那后来还有什么。Skill是不是OK好，还有呢，这个也叫skill，是不是这个叫skill，这个叫skill啊，反正他反正他们俩差不多就行了，而且这个东西我们用的很少啊，还有三个用的机器多，就这个玩意。

用的很少，斜切嘛，对，OK，我们这是旋旋转啊，这个A我就我就我就不帮你们过了啊，这个这个应该把这个说的是旋转是这个说的是平移，也可以说是位移是不是随是是这个叫做斜切是不是OK这个叫做说法好，可是你得记住啊，这些都是什么，全是缝底下的。啊，这个才叫三的属性啊，是不是，这个其实是它里面那个什么变换函数啊，这才是属性啊，其实这个是属性值啊，不要写着写在一个函一个元素上来，直接就写的，面试官会大的能不理解啊，OK，那么来看，那这里面其实我们说比较重要的什么变换组合是不是，我们说顺序是什么，顺序是从右往左的是不是？而且我们都知道什么变换的底层其实就是矩阵的运算是不是？你们应该自己算过了吧，应该没有太问题吧，是吧，要记住那个坐标零，零的原心应该是从他的几点开始的。

的这个理解是不是啊，OK，后面这边我们是讲了一个基点的变化，是不是，我们说基点变化是哪一个句点transform orange是不是OK，那这个属性它可以写关键字也可以写啊，百分比也可以写P值啊，都是参照于自己的左上角的百分比应该是参照于他的高分的啊，这个去API上面看一眼懂不懂拉近我们刚刚那个。体系里面去啊，这个东西在你们后期应该要不断的饱满，懂吗？OK。

好这里，那到这块，其实我们说变换是不是也就讲这讲的讲了这么多东西啊，只不过变换这一块东讲的在这一块讲的比较深啊，稍微注意一点啊，那其实我们说变换，我们说昨天是不是有个东西也没带你们做啊，是吧，时钟吧，因为我们昨天是不是做了一个扇形导航，在做扇形导航那一块，其实我们也踩了好多坑，是不是OK，特别是我们踩了这个坑。是不是其次还有一个，我们说在定义这个事件的时候，我们也产，我们也产生了，我们说这个事件是属性维度的概念啊，所以说元素的任何属性值产生变化的话，都会触发这个事件，我们要控制这个数事件的触发频率，那怎么办啊，其实就是在你给他绑定这个事件的回调函数里面去给他解绑，在最后给他解绑。记不记得大家干嘛，我们昨天在做的时候，我们说干嘛，我们说这个事件因为太容易被触发了，是不是我们要出，我们要控制他的触发频率，怎么办？让他只触发一次，在执行他回调函数的时候干嘛？只要你干完活我就给你弄。

是不是啊，有种卸磨杀绝的感觉，是不是就你干完活立马把你干嘛弄死了，能不理解啊啊，这样能能控制他的一个触发的频率的，懂吗？让你外部属性值的变化不会去触发到我这个回调函数，你如果不这么干，绑上就绑上了，等你外部属性只有变化的时候，照样也会啊触发这个回调的，能不理解啊啊。好，那这些东西是需要记的啊，OK。好，那我们再来做一个啊，失踪，因为我们昨天好像没有在写三星导航的时候运到气垫变换。是不是啊，OK，来看一下，我们来写一个时钟。

时钟OK啊，写时钟的时候的话，我先把这个视频给你。