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

咱们把这个3D版本的也做了啊，那这个这是我们安最后再做了一个DEMO啊，跟3D结合一下，正好把3D也复习一下，懂吧，那这节课完了an就已经基础点解了，那只会在项目里面再去用了，有没讲OK。好，这跟我们奥运有关系啊，其实这些DEMO是从哪边猜出来的，你们应该能看到。啊，应该昨天有看到这东西吧。啊，我可以把这个东西最后也发给你们，这东西我就是从。啊，就是从这个。啊，从人家做的这个弹幕上面扒下来的。啊，本来他就有一个3D场景的，那么他就有一个开机动画的，开机动画就是我们这个开机动画。啊，这个开启动画其实是这个的一个开机动画能理解吗？然后开启动画完了之后，你看就是这些图图片展示了是不是，那我问你，如果我没有这个开启动画，你看我网比较慢的时候。

我刷一下，你看我那么快啊，我访问什么本地的吧，所以快吗？如果网很慢的时候的话，他要加载好多的图片啊，你看要加载这么多图片。是不是，你看这里也是图片。要加载那么多图片吗？你想想啊，图片有没有可能网络比较慢的话加载不回来啊，就说之前得有个开机动画那个吗？让我给我的应用稍微减轻点压力吧，那么你讲好看这种科动画怎么写好一个3D版本的科技动画啊，其实写这个应该是最好玩的，是不是这个肯定需要啊，你这写写。写这个东西要多久啊？写死你了，你写过好像又卡。OK啊，这个东西从设计到写完啊，花好久。OK。

好来看一下，好，我们来看这个3D，诶，我是不是关掉了吧，我把这个开开来啊，我们照着这个东西画，是不是照着画准备画吧。那说一下是吧，OK，来看一下怎么玩。好，现在看上去对自己稍微有点思想啊，CTRLCCTRLB，零四开机动画的最后一个版本，3D的版本。好，这样吧，留下最最。这个是不是可以全部删掉了，是不是把骨架全部留下来，硬来也可以不要了，是不是？OK，这个加胶片也不要，OK，这个骨架我得留下来吗？是吧，OK，那现在我们只是有个骨架而已啊，不是啊，背景好像，诶这次背景改是粉的，所以好，OK，是不是好，然后我们是不是得有一个安踏的U地图啊，以及下面是不是有加载信息啊，那应该是不是我们说啊，其实我们想都不想，肯定得有有个容器要包一包是不是两个结构嘛，是不是一个什么面去嘛，是是走S去的那张图吧。

好像没有啊，怎么办？把所有的图全部拿过来。这里面图是不是都在这123CTRLC全部拿过来。啊，其实我们只需要用里面的一张嘛，是吧，可是我现在全部拿过来，好，全部拿过来之后，我们来看，去找那张logo，那张logo应该是在我们的log里面的，OK，一卖底下的什么。找找找找logo logo应该什么？应该就底下的，底下这个logo是吧，找个好看一点的。这个吧，好吧，OK，来看一下好走你这个他就不要了，好底下是不是得有个P标线啊，是不是好他说已加载啊，OK，已加载。

百分百是不是，有没有同学说，哎，你这个不是要动吗？待会是不是搞个定时器，把你这个字管管就可以了。还嗯啊，你搞个电视机，你不是要根据网络条件来的吧，你搞个电视机从零加到100，你不欺骗用户吗？来看一下你是不是这样的，好来看一下整个度，看是多大。对呀。看。OK，我知道了，这个logo是不是占据了我整条的1/3啊。是不是他没有指定大小吧，根据你的设备来吧，是吧，你看我现在是不是比较大的，那我每个手机的设备的宽度不一样的，是不是，那我就直接拿你这个设备的。那么讲给那个嘛，我把这个一要是不是找这个苗讲，怎么找这个苗讲。

WP外底下的什么？Div啊，Na点是不是点底下的什么。你面什么，是不是让他的外为30%嘛，是吧，OK，走你。哎，高宽支持一嘛，是不是，那这张图怎么是尖的啊，没事就尖的OK，然后是不是让这个区域干嘛。居中去是吧。嗯，那这个区域居中。那OK，居中吧，那就那就居中吧，它底下这个image跟它底下这个什么。提标签是不是他们俩都要居中吧？按照谁来居中啊，是不是我这个音量现在太小了，我最好是按照要，因为我想让他们俩去中吧。那我把这个音量是不是稍微扩大一点是吧，我说外婆底下这个音量干嘛，这个高度干嘛100%。

你看这个音呢，是比较大了，OK，这样它居中啊，OK咋整呃，音呢比较大了之后我们来看一下怎么玩。它这个阴道吧，性为什么。是吧，OK，这个代我就不写了好不好。全圈C是不是。不就他们要居中了，这个不要吧，行，要不是什么认不认识啊啊，这个不认识打人了，好来看一下这里刷一下他们俩是不是都居中了，叠到一块了吧，是不是我张图片稍微上去一点啊，那这种布局的细节的话就马来调吗？你们就稍微的上去一遍，上去把马托还是吗，给个。中影，那是不是稍微算了一个30万，你看这些布局细节上面调整是不是用法为复制就很简单是吧？OK 35万，我的天呐，什么鬼。

好，这点是不是负35差不多吧，是不是好差不多了，是不是现在这张图是不要33D的转，那他的舞台是不应该给他打起来了，OK，怎么搭。外上面可以给景色，没问题。是不是外给你身没问题，给个200是不是OK3他得去做3D变化吗？给谁导能讲OK，那干全3D是吧，走你好，现在转不起来，怎么转写转吗？不用了干嘛，我们有你没了是吧？来一个木是吧，是OK在底下第一个关键针at是不就叫木是不OK是不是会转绕在外头转吗？是吧，那就好写了干吗？你是不快说。

我让谁赚了？我让张一麦断吧，看这个行内块行不行是吧，看我这个全能不能在行行列块上面起作用是吧？OK，看一下这个image类型到底是个什么类型。怎么看你display是不是这边就能看到，是不是嘛，是不是看到。Image居然是个会计元素，是不是因为是个会计元素吧？可是image这种类型的快计很奇怪的，很像英兰洛格。是不是啊，Imagine其实叫替换元素，懂吗？啊，我不希望你们在这一块揪的太深啊，不要像我一样发神经，是不是啊？OK，那其实它的子不是不如格，可是长得很，他行为很像营，该不如犬功，我对他是有效的。

能不能理解？OK，我选的是应该这吧。是不是能不理解啊，OK，那什么叫行内块，什么叫内联啊？其实这里面有很大的说法，懂不懂，可是这些东西现在我不希望你们去研究它，什么时候去研究工作的时候。等等，主要是你们还是在我身上得学，学会这个学习的方法懂吗？所以说你要把所有的东西给你讲透，我觉得不可能啊，因为我课程里面。因为我的课程里面不会涉及到这些东西，懂不懂，我能扩展的尽量扩展，懂吗？那像像这些东西是没有办法扩展了，懂不懂，那这夸张这个扩展起来又是一天能理解吗？OK，那你反正记住阴麦讲是叫替换元素。啊，他的是，可是他长得很像一辆，认为讲OK，那看下怎么玩。

怎么玩？OK，那现在它是不是得转，是不是咋转，好像这边来看一下它的display。好，可能会有点问题，O PQ RS ta abcd display是不是？你卖什么是吧，OK，那可不可用么吗？可以的怪嘛，算了，是不是零段，他去多多360度是不是OK来看一下没有给时间给个。一秒钟。是不是啊信息吧，是不是来看一下走你说一下。哎，你们给错了吧，哎，你们该给谁啊，面面就在哪这边吧，是不是我可以看到，能不能转。

为什么不是基点的问题，你看我这边是不是居中的时候用的也是全木马，关键这用的也是全部嘛，那怎么办？那我剧中也想用这个，反正我都已经写都写完了吗？全是父母，咱们不是懂他了吗？写个括号吧，是不？那这边最好也来一个吧，上面缺不好是不是？我们说这个位移会不会影响这个旋转，这个旋转能不能先他们之间互互相影响吗？不会吧，是不是我们说最好呢？这边是不是也稍微带一带，不然可能会出问题的是不是啊，来看一下刷一下。是不是啊，来个in尼嘛，你微信干嘛来一个in菲尼吗？找你。

是不是就可以了，能不能讲OK，其实我们说，其实你看这边如果不写这个旋转好像也也也可以。算下是不是也可以啊，我们说绝大部分情况下会出问题吧，可是我们这些这些也不需要你记了，是不是你就干吗加上吧，那么讲啊，以防出问题懂吗？OK，说一下是不是我们整个东这个旋转的落地就出来了，是不是那么快。给个两张。是不是可以啊，你说让他装的稍微松一点来看这样这样这样好不好玩。哎，这样好像稍微好玩一点是不是啊，不管了，那就这样吧，是不是，那是不是就说这个加载了是不是啊，加载根据资源加载的顺序啊速速度有没有关系有关系，不能写个定时器怎么玩吧，是不是啊，OK，那咋整。

OK，反正肯定是window，这个得这个得写完吧，哦漏等于一个方体是不是啊，大家都知道一个应用里面资源最多的就是怎么样。肯定的嘛，是不是啊，那我是不是默认就可以认为这些图片全部加载完成之后。我这个应用就可以给你开机，可不可以，我也不要，我这个开机的话需要做的很精确吗？所有的资源全部给你开吗。我说哎，所有的图片都回来了，那好像差不多了，能不能理解啊，那怎么办好看我这边有一段脚本。这边是不是有一段JS啊，CTRLC啊，其实按照正常来讲的话，这一段JS你们大家看看它是个什么东西啊。好，就是一个day。这不都是这些图片的地址啊。是不是图片的地址嘛，都是一个个数组吧，是不是，照理来讲这些东西图片的地址应该是发请求从数据库里面去拿的。

能不能讲，可是你们应该现在还没有学弄的嘛，懂不懂，那我就稍微的去模拟一下，怎么模拟，我把这些数据直接干嘛。直接拿过来，比如干嘛来一个src，那GS里面塔S问点页面上这些数字，我是不是就可以用了？是不是啊，我就干嘛，我就不是拿到这个image啊对对象了吗？相当于我这段代码不就干嘛CTRLCCTRL进来了吗。能不能讲相当于不就吗？就是ctrl a这段代码懂吗？直接写到我的页面里面来了吗？只不过我是现在通过什么引用的形式啊，拿回来嘛，对不懂，一般这种对象你是要通过请求才能拿到的，懂懂可是没有学弄的，所以说我直接把这个对象自己写了一遍，我先把你什么放进来，懂不懂能能讲OK，那我问大家，你看这里面的数据是不是都是数组啊，你们拿到这些数据肯定也会很乱，那一般需要整理一下。

那我把这些数组里面的一个个子项全部拿出来，放到一个大数据里面去行不行？没问题吧，是不是这些数据是不是都放到一块去了，我知道我这个应用要去加载多少张图片了吧？懂吗？这样子吧，是不是做一个数组的拼接能理解吗？OK，那怎么样，我问你我这边现在有没有个对象？你看忘一个人你们就对上么？可以用吧，那怎么办？我在这边自己先定一个数度A等于一个速度可可啊怎办？有没有学过一个循环，叫做风循环，风印循环，循循环什么呢？对象的吧，是不数主是不是也是个对象，那问你。对，他问你这个爱是什么？是不是艾特是里面的每个数度是不是，那拿到这数之后怎么办？我问你，我R怎么去一个数度，怎么去拼另外一个数机啦存在是什么？

给你返回一个新的数组吧，这个新的数组就是你原数组跟你传进来这个数组之间去做了一个什么。拼接的一个速度吧，能不能讲我们说什么AR是不是得重置一下。这样写能不能讲，能不能讲，能不能讲，我们来看一下嘛，整个循环走完之后，第八个第1B啊，这是打断点的一种形式，OK，来看一下。来，我打开这个数字标签刷一下，你看是不是直接停到这个概念了，来看一下这个AR现在是什么。咦，这什么鬼？怎么是拿到了什么名字吧，我把他名字拿进来干嘛，我应该拿他的什么内容吧，怎么办？这是不是才是真正的数度啊，这才是真正什么数度吧，OK，来看一下，刷一下，你过来，你看是不是总共71个是吧，我是不是把这个数组里面的一个个元素全部拿出来，放到一个大数组里面去，懂不懂，现在比较好管理了吧，是不是都在这个大的数组里面啊，你看吧。

能能理解这件事情吗？能不理解给个反应给我，不能理解，你想我现在跟你问你每次我在负一循环的时候，这个itcon是谁啊？爱是不是你美丽面向名字？是不是这个爱，这个艾特是什么？这个特是不就是如O如O空的配角笔记记看到。是不是我们说for循环是用来循环对象的吧，这个item是不是就那个对象不是对什么属性名根。

属性值的吗？是不是这个艾是不是拿到这个什么属性零啊，那不就是这边的属性零吗。是不是，然后我再通过这个对象大括号的话，是不是拿这个拿到是个什么。每一个数组吗？他所对应的每每个数组，我干你什么事情？每次在循环的时候，我把这个数度拼到上一次吗？是不是把拼完，最终拼完这个数组，再把这AR给他覆盖掉嘛，那我下一次进来这个AR的话，是不是就是我上一次干嘛已经拼过一次这个速度了，他再来拼掉个吗？真的最终把这个速度给他拼全吗？现现在讲OK，那拿到这个数之后，我们是不就可以做了，是不是数组里面拿到的是不是都是我的图片地址，我现在是不得发请求啊。我发请求得去拿这些图片吧，那怎么去发请求呢？还没学过，还没学过二甲的是吧是吧，没有学过任何发请求的方式吧，那这边还是得来模拟模拟，那怎么办？是不是问你这个数组里面的每一个ul你都要去发请求去拿它了，那怎么办好比如我Y一个I等于零，I小于什么。

还说什么？哎呀，点认识么？里面的每个U你都要去发请求去找他的吗？怎么办？OK，我可以在这边去画一个卖讲啊，就是假是允许你去用一个什么email角，因为这个图片类型用的实在太多了，就说你可以不用通过多个门的点create element email来创建一个元素，直接可以用一外角通过构造的形式来创建一个一元素的。懂吗？你卖的元素一般都是的吧，当你的指向一个什么。一个地址的时候，我是不是得去发请求，拿他的这里去默认，默认自己会做的吧，也就是说一个图片的src，当他是一个地址的时候，他是不要去后台去把这图片拿回来了，这是要走网络的，有这个请求需要你去发吗？不需要，你只要给1S址览给你发了懂不懂？所现在我有没有去发请求，打每张图片。

有是不是啊，我们来看一下这个过程。好，问你现在我打开的，虽然说我图片是在我本地，可是你看我是通过服务器，这是个本地服务器，能解吗？说他整个都是走网络的，来我说一下走你看见没有，他是不是去拿这些图片。你看每一个是不是都有HP的状态了，说明是需要走网络的，那么讲我把网给你调慢一点。是不，现在网比较慢，来我来刷一下，你看这个这个过程就就比较慢，你看一个个去哪了吧。你们看见，你看，你看，这是在等待，等待。你看响应是不是两百一点点去拿的吧，能不理解你看看，你等待吧，等待等待，你看一点点把自己的图片给他解决回来吧，能不解你看上。

上面你看每次都在走啊，这就是一个整个浏览器的一个请求状态。能理解吗？OK，说明这些图片我是要发请求去获得的是不是？那既然我是不在这边去发请求的，那你这个进度我是不是最好也可以拿到，怎么拿这个进度？想想我在外面定一个flag f lag代表起止，第四默默认是零是不是啊，我只要这个请求成功一次让你加一，成功一次让你加一。总共多少张图片，我知道AR点认是不是就是什么多多少张图片，那请求成功一次不拉克加一是不是代表你请求成功的图片，那你这一比的话是不是就一个嘛，就是你的进度啊能没讲，那我是不是得知道请求什么时候成功啊。能讲OK，这个一面讲很牛逼，这个面上有个事件就是的什么是只要你触发这个事件了，说明当时这张图片他是请求成功了，还一个事情哦。

什么意思，请求失败了他就会掉，这个事情懂不懂说每次请求成功的时候不来加价，请求失败的时候给你打一个日子康点落个地址有问题，那你讲我这是本地的吗？肯定不有问题。是不是OK，那怎么办？那每次把那个加加你在这边是不是加加问你每次加加的时候，我把这个批钱给他了。拿到这个琵琶，我挖这个琵琶P弄的等于doc多点Q要找到什么？

找到这个提标签。OK。然后我给P标签是不是有一个T秒达，其实默认上来的话，这个值最好点零，懂不懂我们可以来看一下这个效果，那么我们说P点什么，P no的点in呢？HT秒都等于什么，等一个文本的么？这个文本里面这个百分比是不是跟我请求这个什么。成功的次数是有关系的，这个百分比怎么想？怎么想除以什么？除以总的AR点认识干嘛乘以100，这是不是就达到百分比？那么讲那进度有没有做出来。进度是不是就出来了，来看一下刷一下。是不是在刷，你看除非都没刷回来吧，你看你加载这么多，已加载这么多吧，是不是。

你看这不都在看，你看这个是不是慢慢在家是不可这个是太长了，怎么办取整吗。是不，最好是把这个字取什么，再乘万是不什么，那点怎么取，四舍五入吗？是不？把这个值贴过来吧，来看一下。说下。这边在等吗？你看你看上来是不是默认看到的是一家在百分大，然后才什么慢慢出来吧，你看这个字。还在陪你呢，怎么太慢了？太慢了，看看行不行。还没到一吗，可能。你这是在干嘛？等一会，等一会，等一会，不要急，不要急。

好像一直都是0%。是不是我这个网快一点，我看看。刷一下。哎，这个快一点。只吧，我这写错了哦，你这个东西四舍五入是不是要么零要么一啊。是不是这个都永远是小数吧？是不是一个乘以一百四吧？我的天，是不是OK，来看一下。刷一下看是不是这个过程啊，OK，来看我快一点的升级方法。看下。哎，是不是就可以了，那这个图的转法有点二，让它转的稍微顺一点这里。

好，你看慢慢再转吧，你看这个值是不是就是什么慢慢增加啊，可是默认上来让用户最好看到是0%，这边随你怎么写吧，是吧，这里说一下你看。慢慢开始，慢慢开始玩。能不能理解，OK，那是不是整个加载我们也做完了，懂吗？虽然说我们这边是模拟的，可是思路就是这样。能解吗？以后学了阿贾克斯要把这个单改一改。等懂，因为我们这边请求这个地址的话，我们曲线就活了，通过应该就这按去取的，正常来讲的话，这边该小的。啊，这请求的懂不懂，说学了学了这请求之后再来把这个DEMO稍微改改，能理解吗？OK。