52.尚硅谷_css3_开机动画(2D版本).wmv原创

那我们再来做一种动画类型啊，那这种动画类型的话是有实际的应用场景的。啊，一般我们叫它开机动画。OK，那这个时候我们一般是有这种开机动话的，现在加载是不是特别快，我把网络调慢一点。按下你的键盘上面左上角是不是有个E家，按下键会跳出来个面板，面板里面有个叫那work肯定行式网络条件，网络条件这边有一个很慢的三级网，他就可以浏览器给你模拟这种很慢的三级网，来我来刷一下所，你看上面是不是在转，你看这边是不是慢慢去加载，加载时候你看这边是不是有个加载的进度了。能理解，这就是在一个很慢的3G网下的话，它应该是怎么样去加载呢？所以说你们写出来的网页其实要做压力测试的。啊，一个是访问量的测试啊，一般访问量测试不会访问，如果你这个页面是前端写的，大家知道客户端嘛，每人一台嘛，那其实这种访问量的测试的话，做的不多，对不对，如果你页面是后台图的，我们要做这种压力测试的，就是说几百个人一起访问的时候，到底是什么样的啊，如果页面不是放在服务器上面去渲染的，是放在客户端渲染的是不是，那这个时候就会测试你什么网络慢的情况底下，哎，到底是什么样的，懂不懂啊，这些比较大的公司经常会做的事情啊，那我们学习阶段的话，我们先干嘛不去做这种测试，对不讲，你要把页面，现在把页面换过来，你再来调优，能懂吗？OK，那这是这是不是一个3D的，咱们先不写3D的，咱们写2D的，2D我们做成什么样呢？

就成这样。OK，现在我做的不是在移动端，没有做成开机动画吧，我要把它做成开机动画，感觉怪怪的，不应该是这样的。啊，我把这个结子做啊，我不做，我们来看一下，走你啊，波浪形的懂吗？这种波浪动画吗？讲OK，可是我想把它做成开机动画，什么意思，我想做成这样。

我做成这个版本。OK，说一下哎，几百斤的人了，上课还要装可爱是不是谁啊，邱海峰嘛，对吧，不是我啊邱海峰啊，这里你看做成这种什么波浪动画啊，来看一下怎么玩，首先做二级版本的。好，关掉，来看一下咋做啊，这个自行车手自己也去看看啊，这个类型跟我们兔子机是一模一样的，懂吗？再来看这种波浪怎么写。好，其实这边没有3D的东西的话，有3D，待会是不是有个3D OK，那我出试机来复制一份，CTRLCCTRLB。零三我们来做一下2D版本的波浪，也就是我们开机动画的2D 2d版本当是这个开机动画它它有没有什么好处，开机动画2D版本我问你如果一个应用啊，它有一个开机动画，想一想，那我在这个开机动画这个时间段里面，我是不是可以去后台加载好多时间渲去渲染我的页面啊，开机动画一旦去停，一旦停止了，是不是我后面的页面也就全部渲完了，用户会看到比较坏的图片啊，或者说一些比较错乱的布局吗？看不到，等这个开机的话打开来的时候干嘛，你后面的渲染是不是已经全部都做完了，能不能讲这也是经常我们是不是看到很多应用都是有开启动画的，是不是啊，这是开启动画的意义啊，不是说这个开心动话，我们做出来全是为了好玩，不是的，我们做一个好玩的开心的话，是为了吸引住用户，让用户有耐心的去等待这一秒两秒，懂不懂等待的过程当中给他去看。

一个比较炫的一个动画，它是可以停下来看的，发现这两三秒之后动画没了，我后面东西也就全部渲染完了，那我这个应用就可以正常打开了，懂不懂，如果没有开机动画，你用户打开这个应用的时候，是不是有可能就会看到些比较出来的布局啊，一旦开到出来的布局，哎，这家公司不行，技术团队不行，是不是有可能就会卸载你的APP？

能不能理解啊，诶你这个技术不行啊，那我待会去交易的时候，那我这钱是不是就好像有点不安全啊，那下意识就会认为你这这个应用很low，懂不懂，那他就有可能会卸载掉你的APP，那你整个应用有可能会流失用户的，能不能讲，所以说这种开机的话是有意义的，懂吗？好来看一下，那这种开启商怎么做。好，是不是先看布局是不是首先得说一个点，OK。啊，我把这个页面全部干掉吧，我们重新讲啊，全部重新讲。好，我们这个东西是不是放在了移动的，你看这I iPhone5嘛，这是安卓的一款手机，我们iPhone叉。百分百你看是不是还是一样的啊，所以说这个布局上面的话，其实我们后面讲移动端的时候的话，这个布局我们要讲的很深，懂不懂，可是暂时我们先讲浅一点啊，你就记住做移动端开发一定要加一个标签，麦标签m me PA这个东西其实其呃你如果说不是那种去很想学原理，就是不是很想去学这种就是比较深的东西的人，他就会干嘛，他会告诉你移动来开发加格没找标间就行了，是不是啊，可是你得知道加这个面料标签的意义，懂不懂这个意义我们要讲一天。

就讲这一个标签，我们讲一点啊，这我放到后面来讲啊，OK，首先你先用内容什么的，OK，肯的DT等于DIDOK逗号应该小掉等于1.0由一，比如刚S1等于no是不？你想知道听得轻松一点，你先把这个。

那标签你先给我背下来，或者说自己敲个几遍，敲个十遍20遍，那不你讲OK，如果你在后面听的时微轻松点的话，那你就这么去做啊，熟能生巧吗？好，来看一下，现在我们来看好你要做这个东西有几个元素。这个这肯定是每一个字都是一个元素，不然他可能如果你放到一个容器里面的话，那你能选中他们吗？你看他们上动画是不是不一样的，是不是你想让他们这么这么参，参差不齐的话，你必须是。有一个元素去做包裹的是不是OK，而且我们说这么多字，肯定是有个容，肯定是有个容器的，能不讲，而且我这一般我们说是不是我们不喜欢去用玻璃，所以说我们外部肯定是有个包括区的。是不的，OK，那这个成绩该怎么设计？首先上来来个did给外法，这是我们最外成的包裹，去用来模拟玻璃的是不？那怎么办？上来我先给干干些事情吗？马点先给你清掉，看你先给你清掉是不是，然后呢，我们得拿玻璃来干嘛，这个玻璃我们是干嘛，这个高度值得继承下来的。

是不是首先高度得全部继承下来，滚动条给它静止掉，为了使这个外能有我整个视口的大小的话，它的高度怎么办也得拿百分百，是不是这个是我们来看一下。F12，虽然说页面上面什么东西都没有吧，可以来看一下，你看这个外部的区域是不是就是我们整整个区啊。是不是啊，OK，相当于我这个外壳，相当于是我的玻璃吧，而且我这时候整个区域是不是一个did啊，它的样式是极其干净的，能不讲不要操作玻璃的样式，懂不懂，那这种是为了干嘛，这种就干嘛，玻璃样式的话写写你写个代就够了，懂不懂？千万不要再去操作一些什么玻璃身上的字体啊，或者他的其他些样式，可能会出很大问题的，懂吗？OK，拿个第来模拟是最干净的，OK，然后怎么做，里面是不是有个。

阴，那是不是也是一个包裹下，是不是来一个class叫做阴呐，里面应该放什么是不是不是吗？几百斤的人了是不是OK，几百走你OK。几百。几百斤的秋海风了。这个风很有可能听不出来。秋海风上课。还要。装喂，正好装可爱，OK，是不是饿不饿，好，这你来看一下，好是不是过来了，好可是这个样子，你看我这个阴桃是不是现在积极的笑啊，因为我这里面都是一些SPA是不是啊，待会它是不也得垂直随平居动啊，可是我们说SPA元素垂直垂直垂平居动的话，最好控制text跟航高最好做了，那是不是啊，因为想让它在整个四格里面随居中嘛，那我把这个音呢，跟Y设计的一样大。

OKOK，那么看一下我把阴跟外部设计的一样大，这个时候我应了，是不是就不需要水平居做了，因为占满了我整个思口的区域吗？那我的孩能不能给百分百，还一定要给百分百是吧？不然你看这个高度是靠靠内容存在的吧，你看一旦还得给他分百的是不是去哪？哪个？啊不不应该是外B底下的CTRLC，外B底下的class in了吧，是吧，写精确1.t走，你来看一下，这个是，你看in是不是跟我外婆的高度一样了，因为你是个会计元素嘛，高度是不是继承的外婆的是吧，那不就是继承你的外婆嘛，那我的宽度是不是也跟你一样了。

那讲OK，然后是不是就看了，让这个嘛居中嘛，居中怎么办，我说你的等于行高等于多少，看行不行。哎，不行，我们这行高应该得多。含高因子为一，我们看一下。哎，好像是不是也不行，来谁的高。失败的很高吧，好像现在我说水水平居中，是不是可以做了。圣马水平居中的马。可是问题的话是你这个阴囊块好像。

好像用行高还不能去控制它吧，为什么用行高不能控制啊，现在因为我这个行高现在是不是没有PX值的，而且我这个行高的百分比拿的不是什么。高度的吧，也就是我写个行高，它的百分比是跟着它的字体来的吧，懂吗？那所以说这两个百分比的意义是不一样的吧，那是不是不能这么做，那我们换换个方案，那就不让他百分比了是吧，我就让他在这边干嘛撑开了嘛，是吧，是，那这个div你想让他居动怎么办？那只能换，只只能换方案吗？韩高不行吧，那怎么办？那就为什么最终换个嘛做的是吗，不是么为。零吧，好，我们用这种这种方吧，是不是让为0TOP也为零干嘛，BOT点波也为零，是不是这样的话，你的外应该干嘛，为什么。

相对地面是吧，这边嘛，应该要凹凸，不对劲也不行，你这个音呢，我不知道高宽啊。是不是应该的，高宽是靠这个什么SP撑开来的吧，那怎么办换？宝贝50%是吧，全ator什么3D是吧，怎么办？全能3D怎么办？负的50%，负的50%，然后呢，零。看下是不是全部都阴了，是不是已经居中了，人阴了是不是靠这个败？你看高宽靠这个败撑开来的，可是文文本完我想他去一行吗？怎么办？等于no是吧，周年你看是不就过来了？

对俩是不是也垂直随平驱动了，那么讲是不是未置高分的垂直随平居动，我们是不是一口气换了三种方案，那这种方案的选择的话，是不是我感觉是有难度的，是不是啊，OK来看一下，那现在最起码他是不是已经过来了，是不是OK，那过来之后怎么办？是不得有动画，而且不有背景的，这个背景我们现在给给外婆了吧，这个背景给给多大家可光的为灰色。是不是这样的，OK，他文字是有颜色的吧，你不可能这个SPA的颜色你一个个去设置吧，这不可能吧，是不是，那怎么办？是不是得空加来空啊，那这个颜色我们待会再来写吧，是不是先得让它动起来吧，怎么动啊？是不是我这个阴那底下的什么，所有的干嘛都应该有一个什么，是不应该是个关键字吗？是不OK，是不是我们来定这个关键字就行了，是吧，这个关键应该怎么做。

怎么做？怎么写艾特，什么是不是关键字，名字就叫什么move OK，这关键怎么写？这这个观点怎么写，我们发现这些字是不是就是上下来回的跳，是不是，那肯定是控制全Y吧，是不是切记不能控制全，我现在操作的是个什么元素。失败记不记得我们有一条全是只对会计元素有效，我这个失败不是个会计元素吗？能用是吗？能用吗？不能用那怎么办？定位吗？可不可以啊，推行为不是好不好不说不好，为什么你一旦不是话，他们都去坏了。

是不是最好让他们在文档里面还有残残留吧，这个布局你得干嘛保证住吧，那就干嘛相对定位。能不能讲好，我们这边方案从全动变成了，而不是落在最终变成了。流量是吧，这个方案的选择也是需要思路一步步的去思考的，为什么不能用全默，因为是范，不是快计元素啊，全方式起不了作用的啊，为什么不能用绝对定位？啊，这个布局还得给他干嘛保留住啊，不能让他们也到一块去啊，所以最终采取了相对地位是吧，那就好做了，错时干嘛不干嘛不为是吧？OK，干嘛网上走是正式。驸马给付10P码。是不是啊，OK来看一下，刷一下是不是干嘛，我们说没有给周期啊，比如说我让你干嘛一秒钟是不是啊，OK，看一下行不行，让你来个匀速吧，是不是一秒钟。

匀速吗？我的个天，看见没有，都没动一分点，咋动的，一起跳吧，很开心，一直在跳吧，我们是不是有错落的感觉啊，怎么办？有错的感觉怎么办？有坐落的感觉怎么办？说明每个人跳的时机不一样吗？有什么有什么延迟吗？能讲那每个每个字的延迟时间一样吗？不一样啊。是不是，那怎么办，而且你看这个跳符合我们这种吗？我们怎么跳的波浪吧，现在呢，上去上去上去咋整。咋整这个我你们写能不能找。

现在他的跳不都是这样跳的吗？我想让他变成什么这种形式，咋整啊，叫什么拉那吧，来看一下周年。现在最最起码是波浪了。是不是我本身我所有的都全部都是波浪吗？你看这边是不是所有的都是波浪，现在让你有这种错折的感觉不就行了啊，你们看不出来是因为我给的太小了，是不是给个试试你们看。是不是波浪，你如果这个不写呢，这。一闪的吧，能不理解啊，我们是不是要有一个什么，有一个平滑的，一个过度的，是不是，那怎么办，是不是得是二这能理讲是不，现在就差什么了。错落的感觉了吧，错落的感觉，你说我这还能放在这边指定吗？每个人的颜值都不一样吧，肯定是不能放在这边指定吗？怎么办？肯定是用指定吗？可是关键字是不是这么写的没问题是不是，那怎么办？标签嘛，是不是我们什么window点漏的吧？

等于什么分行吗？走你怎么办？先把这个元素给我获取到所有的SBS3什么弄等于什么多个的点Q要把or找到做吗？就是就是这些鬼吗？很LC找到他们，找到他们咋整写循环吗？循环给他们绑定什么钥匙。是不是只需要绑定一个钥匙啊？那需要批处理吗？需要吗？不需要直接干嘛。掉吗？是不是怎办哇？一个爱等于零二小什么点什么认识二这叫是，然后怎么办？i.still.animation等于一个。

东西是不是等于他把这个拿来。是不是CTRLC去改什么要加一个延迟，第二个可以被解析为时间的值会给延迟啊是不是？那在这边干嘛砍一刀吧，是吧，砍一刀怎么砍？先写两个冒号，再两个加号，要砍一刀的，那怎么办？加一个括号，要养成两的习惯，每次自家拼接的时候，这边给我敲个空格，以免出问题，能讲后面也要敲个空格，以免出问题，这边是要去加一个秒的，是不是怎么办？跟这个爱有没有关系啊，爱前一个。这边我直接给好秒吧，可我说行不行，第一个没有颜值吗？每次都是的颜值吗？

懂吗？累累加上去吗？那边讲，那最终的效果应该也可以出来了。那个，哎，你们是不是不用想。对，因为我不是做，不是不是在做P处理吧，那这个是不是得干掉，直接应该写属性值吧，是不是这样，OK这点。这个可以不用改是吧，好来看一下这里。是波浪了，就是我这个波浪太夸张了，是不是，这波浪上微干嘛呢，下腐蚀是不是走你这波浪有点慢吧。点三。不就出来了，那讲就差颜，颜色不一样吧，是不是？OK，好像海风的肚子，来看一下是不是现在就差颜色是不是，那怎么办？我们说每个节点的颜色也不一样的，点死掉点了吗？

点卡了吗？是吧，这个卡了是不是我们说外面得有个速度。一个数组看吗？一个数组嘛，一般这些东西可能是从后台请求回来的，那我们先先就可以了，OK，我们说什么赤橙黄绿青蓝子。次完蛋，拼不出来，是是不就红吗？是不是成哦哦啊吧，好呀，长得不像我才不换，看了orange有你就是他这能这能难倒我开玩笑是成华Y没听错吧，绿G是不是赤身皇帝蓝来定写不出来，PI克只只写不出来第个片第一一批吧，是不是第一批一平没问题，几个了，1234567个吧，我总几个，我的天。

34567啊，那我就重复这边几个。七个再来一遍吧，是不是OK？应该够用了吧，够用了吧，那看了应该点什么是不是就可以了，OK，来看一下应该完事了，说一下是不是可以了，哎，就是黑色嘛，反正不一样的吗？是不是那不理解，OK，那就做完了。

是不就做完了，你看他的颜色肯定会稍微的没有，他应该是设置上卡了哦，没有看了少了个啥，你看哪怕我这个看了没有水的，问你这个没做肯定做了，最后肯定做了吗？你看没有看的话，他是不是没有在那天视频给你去加这个卡了，那讲浏览器是不是自己有一个容错能力的是吧，这两我这个看了没设置的，肯定是有设置的，比如说我后面再加一个吗。不管了，加给他吧，是吧，你家看一下这个肯定是有颜色的吧，是不是只是我们刚刚没有给，是不是他就没有自己给你角色卡老，可是这个步骤发生了，浏览器给你自己做了浓错的处理，懂吗？那我这个波浪的话数就出来了。能不能理解？OK，大家下课先休息会。