尚硅谷前端基础 (123)

好，旋转我们也说完了，那接下来呢，我们还是先做个练习。呃，我们做一个练习，在这我们直接创建一个，我们这来一个13啊，我们来做个什么呢？哎，我们来做个表，哎，做一个我们叫做一个钟表吧，哎，为什么要做钟表呢？因为我发现刚才我们讲那个rotate rotate可以旋转，而我们最常见的旋转可能就是钟表里边那个指针对吧？哎，秒针啊，分针啊，时针它是会旋转的，那这个钟表我们要怎么做啊，钟表我们要怎么做，那别着急啊，别着急，我们先不考虑钟表这个事儿，那比如说现在我就想做一个秒针，我要怎么做对吧？咱们这个这种问题啊，一点点解决，不要着急啊，我们先做个秒针，我们先试试啊，我们先把这个默认样式先都给它清除掉啊，Mar定零，然后来一个拍定零，我想做一个秒针，怎么做？哎，我们说秒针那不简单吗？我们来个div，来个class SE秒针是吧？Secondec，诶，Ecec，我们来一个这么一。

不累，秒针嘛，秒针我们直接写样式就完事了，SEC。点一个SEC秒针应该比较长一点啊hi，比如说我们来一个这个来一个500像素吧，哎，500像素哎或者400像素啊400像素，然后呢，我们的这个宽度窄一点，窄一点也得来四个像素，颜色是一个红色的background color，哎background color，我们来一个这个red，这一保存，这不就一个秒这吗？我们看效果直接运行。哎，是不是一个红色的条啊，哎诶确实还挺像秒针对吧？确实还挺像秒针，我也可以让它居中一下marin，我们来一个零，来一个这个凹凸，哎是不是就居中了，哎，居中了对吧？哎居中了秒针，诶确实还挺像对吧，确实挺像，但是呢。秒针好做，那关键这个秒针是不是还得能还得能转起来呀，我怎么能转呀，那有同学老师你就那什么呗，你就给他设置一个那个那个rot的那个ZZ轴转不就完了吗？刚学的呀，转字four嘛，我们来一个rot的一个这个Z你就转呗，比如说我转一个这个，呃45带个行不行，哎我们来看一下不就完了吗？四十五行不行，这一保存诶来看诶确实赚了对吧，确实转了，但是你发没发现什么有意思的事儿啊，这事儿太有意思了，对吧？诶确实是转了，但是这个秒针转的时候，它是沿着哪转的，是不是沿着这个这个中间这个位置转的呀，哎，沿着中间这个位置转的，转是转了，但是这个时候转的就挺奇怪的，对吧，挺奇怪的，哎，那这个转的转的对不对啊，哎，转的很显然它有点小问题啊，有点小问题，那这里边啊，比如说。

那么这样，我先把这个动画呀，我给它加上啊，让他通过动画去旋转，在这儿呢，我给他写一个，我写一个这个艾，一个这个key frames，我们直接来一个，既然是转嘛，转转转我们就是一个还是叫转表的一个运行嘛，对吧，转，那我们既然是转，我们这里面的效果应该是一个from from哪呢？哎，From我们这是一个这个transform的一个rotate，一个什么呢？Rotate z的一个零啊从零度往哪转呢？哎，往我们这个360度转，哎吐。

因为它转嘛，我们得设置动画对吧，我们这直接来一个to，吐一个什么呢？哎，吐一个我们这儿来一个这个360度啊，360度，那这样的话我们要让它转，把这动画给它加上，直接来一个animation animation我们这个是一个run run的话给它来一个时间秒针，应该是60秒转一圈，对吧，我们直接给他设置一个60秒，那这样它是不是就就转起来了，诶还确实串起来了，但是还是我们说那个问题，转是转了，但是转的不对，因为秒针是什么呀，我们都知道秒针什么样，秒针是这样，它是沿着根转的，对吧，等于现在我们这跟跟鸡箍棒似的，它是什么呀，它是沿着这个中心转的，这样是不是有有问题啊，而且我这转三百六还不对，我应该是转。

赚360，我们想一下赚360，赚366回来没毛病啊，赚三百六那我们就不管它了，但是我们现在转的话，哎呀这不对呀，那怎么办呀，怎么办？其实解决这问题呀，也有多种方式啊，有多种方式，比如呢，我们可以干嘛呢？嗯，我可以在div里边，我再创建一个东西，创建一干嘛呢？比如说现在我们需要秒针什么呀，它只是上边转，下边不转，对吧，我可以干嘛呢？我可以创建一个东西，比如说我在这儿再创建一个子元素，我设置一个白色背景，设置成白色背景，是不是把它下边给盖住了啊，盖住了以后就看不出来了，对吧？看不出来了，这是一种方式，但是这种方式的话，它会有局限啊，有局限，所以我又想到一种方式，怎么办呢？诶，这样看着啊。

我的这个秒针外边啊，我给它创建一个复元素div，我们叫做一个class，叫做什么呢？叫做一个SECSEC的一个rapper wap啊。P，这个rapper呢，我给它设置一下样式。第二一个SEC rapper，我给它设置一什么呢？我给它设置一个是一个五百五百像素，Hide呢，也是一个500像素啊，也是一个500像素，然后呢，Background color background color，给他来一个井号，一个BFA啊BFA1保存，这是不是出现一个块啊，哎，然后啊，我先别让它转啊，我先不让它转这一保存，我现在干嘛呢？我让它转，哎我让这个块发生旋转，那我们就直接animation，我们来一个这个叫做一个也是一个60秒，我让它转60秒这一保存，哎，我们会发现这个块是不是转起来了，哎，这个沿着哪转呢？这个块是不是在沿着这个中心转呀，哎，沿着中心转，那好，这个块现在转起来了，那我干嘛呢？我直接把这个秒针设置为我这个块的一个子元素，也就说我能在这个位置，在这个位置，那这样的话，当我们块转的时候，我这个秒针是不是就跟着这块一。

块转了，诶一块转了，那这样是一个什么效果啊，看着了把这秒针啊写到这里边去啊，写到这里边去，然后呢，哎，那就它就不需要这么长了，对吧？不需要这么长了，可能对于我来说，我这个长度可以调窄一点，我可能调300，我觉得差不多是不是这么一个位置啊，然后我再让这个块转，带上这个块转，那是不是你看这个秒针就转起来了，但是现在它也不是中点，如果正好中点的话，我们这个秒针应该是一块的一半，应该秒针的高度是一个250个像素，对吧，这样就转起来啊很简单，所以你讲那转的话，其实效果很简单，但是同学说老师你这玩意儿太难看了，外边还一大白边，诶我们把背景去了不就完了吗？背景一没，是不是就剩下一个秒针了，哎，就剩一个秒针了，也就是说实际上现在我们转的并不是这个针，转的是谁，是这个针外边那个容器，外边容器转，就导致这汁儿是不是跟着那个容器一块转呀，诶一块转，当然我们还有别的实现方式，但是现在我们。

啊，先用这种，这种相对来说好理解一些，好，那我们就可以再做这个表了，所以你要理解一下这个原理，原理是什么？原理就是我们的秒针本身并不转，转的是我们秒针那个容器啊，转的是容器，所以我们每一个针，秒针也好，时针也好，分针也好，我们在外边都要给它指着一个容器，让它那个容器去旋转，好呃，理论我们说完了，那我们直接来写了，那这里边呢，我们从外边来创建啊，我们先来创建什么呢？创建我们这个表的一个容器啊，表的一个容器，我们这直接div点一个cck clock啊，这就表示的是我们这个表，表里我们一块块一点点写吧，我们先设置个表的样式啊，设置我们这个表的一个样式，表的话，我们这直接给他设置一个表，一个clck clock，我们给它一个外，这个表呢，是一个500像素，Hide也是一个500，然后background color呢，我们先设置上啊，来一个井号，一个BFV，不然看不见它啊，在这儿呢，然后margin的话，我们直接来一个零，来一个这个凹凸，给它设置一个居中对吧，居中位置的话，我再稍微的往下调一点，再给它加上一个marin top marin top，我给它来一个这个。

来一个100像素吧，100像素把这个位置往下调一点，那是不是就跑到这个位置了，哎，跑到这个位置，那现在呢，这是我这个表盘，那很明显我们正常来讲表盘应该是一个圆的，对吧？圆的我们做一个圆表，当然也有方表是吧？我们现在做一个圆表，圆表的话我们要用一个包的这个reducedi reducedi我们直接来一个50%啊，50%是不是就出来一个圆形啊，哎，圆形，然后的话，我们还希望给它指一个边框吧，Boder我们来一个什么呢？粗一点十个像素，然后来一个solid的，然后来一个black黑色的一个边框，这一保存，诶表盘是不是出来了，那背景颜色我就可以先给它暂时的去掉了，不要这个背景颜色了，那这样我们就出现了一个表盘对吧，那这个就是我们的表盘，表盘完事以后，然后做我们这些表的一个指针，表的指针我们从底边往上做最底边的一个指针。

应该是什么呀？应该是我们这个时针对吧，时针，所以这儿我们来创建我们这个时针，创建我们这个时针，呃，时针注意时针呢，它是我们的这个，呃，也是一个需要转动的，所以它也需要两层，我们来一个时针，我们叫r Hou的一个rapper wib啊这是我们谁点啊，没写点这个是我们这个，这是我们这个时针的那个容器啊时那个容器，时针那个容器，我们这儿给它写完了以后再往里边我们来创建我们那个时针，时针的话，我们就叫2HOU吧，简单点写啊，点一个Hou，二是Hou r吧，就Hou吧hol class应该就是拿不准了，我查一下啊。

哎，对or什么H不发音对吧？好，我们这个时针就给它创建完了，创建完了我们来写样式，写样式的话，我们先写这个容器的样式啊，容器的样式我们这儿来设置我们的时针，设置我们这个时针，我们这儿是一个R的一个这个rapper r rapper的话，十针的话应该是最短的，对吧，十针应该是最短的，所以这个时候我们让它的大小呢，是我们的height height的话，呃，是我们。

负元素的，我写一个60%，我们看一下啊，60%，Y呢，也是一个60%啊，Y也是一个60%。也是一个60%，然后我们给它设置一个background color，来一个这个井号，一个BFV，我们看它在哪，诶现在是在这个位置对吧？那很显然这个东西应该是在我们副元素里边是居中的，你要不居中的话，它它这它转的时候就就偏了，对吧，一定得是居中的，所以居中的话，那我们这儿就要给它开启一个position，来一个absolute啊absolute然后呢，上边我们也得开启一个relative对吧，我们让它相对于我们这个复元素进行定位，然后居中就简单了，TOP0 left的零，然后是一个MARGIN0，哎，不是MARIN0去了，我们应该是一个什么呀，是一个这个BOTTOM0，然后是一个这个RIGHT0啊，然后就是我们这个marin，我们要给它设置一个这个凹凸，这样它就正好在素元素里就是居中的了，那这个是我们一个十针，十针的话，我看长度差不多，那我们就直接取一个60%吧，待是要调的话，你可以把这个值给它调大一点啊，调大一点，但是其实我们说一下啊，我们这个居中，你像这。

居中的代码其实不仅仅是十帧，我们剩下的这里边的每一个子元素是不是都得是居中的呀？哎，所以这个代码我改一下，我直接是点一个clock大于号里边的什么呢？Div，它里边的所有子元素我都让它这个居中，我让它默认设置，那待会我省了就一个一个去设置了，对吧，我们到出点篮省点事啊，也应该这么写对吧？应该这么写好，那这个整个我们的时针的容器就给它设置完了，然后我们来设置我们这个时针，我们的这个r ho r的话，这里边它它的这个高度的话，它就不用改了，它的高度就应该是负元素的100%，跟负元素一边宽，对吧？Y的话，我们这个十帧的话，应该稍微的去稍微粗一些啊，稍微粗一些，那粗一些的话，我们就给它来一个六个像素吧，诶六个像素粗一些，然后呢，Background color background color，我给它来一个井号，一个000，我给他设置一个黑色啊黑色，那这是我们十帧，但是很。

明显它的这个高度我整高了，整高了，为什么整高了呢？因为我们十针是不是应该是是是这个位置只在上半部分有下半部分是没有的呀，所以我们应该把这十支带整的小，整的高度应该我这设置一个50%啊，只有它复元素高度一半，那这样是就就变短了，哎就这样是上边部分，然后把它设置到中间，中间的话我们就是一个marin来一个零，来一个凹凸，设置到中间以后的话，这个实针就跑这儿来啊，跑这儿来了，然后再转的时候，它是不是就这个块转，它就正好沿着这个圆心去转了，哎圆心转了，但是我觉得这汁儿稍微的有点。有点短，有点短啊短，我把这调大一点，或这调一个70%。

这也是一个70%这一保存啊，像这么效果吧，待会我们再调，那这个就是我们的一个十帧，然后去掉它一个背景颜色，十帧就有了啊，十帧有了，然后是我们的分针，剩下就一样了啊一样了，CTRLCCTRLV这个是我们的这个分针。分支的话，我们叫second second second minutes是吧，M吧，Minutes minutes，我们这也叫一个min啊，分针的话，我们这个样式会稍微有点变化啊，我们这复制一下CTRLC，嗯，这里边我们来设置一下这个分支，设置我们这个分支，呃，分支我们再先写上么，点一个一个，别的都不用设置，那些都置好了，我们的一点分要一点的是一个。

然后呢外呢也是80%。哎，80%，然后它的一个background color，我们还是让他先显示出来，直接来一个井号，一个BFC，那这个时候分支应该把这个十给就给盖住了啊，就给盖住了，盖住以后我们接着再往下写啊，把这个二往上提一点啊，往上提点这是我们这个十针，然后就是我们这个指针了，它的指针啊，其实跟这个二差不多，我们这改成一个这个min，我唯一需要做的是我们要让这个指针啊稍微的细一点，因为分针肯定要比时针要细一点是吧，我这写一个四个像素，那细一点，那这个就是我们一个分针啊，分针比这个秒针要干嘛呀？哎，要长，然后要要细啊，要长要细这个分针也就完事了，那下边一个秒秒针是吧，分针比十要长对吧，下边是我们这个秒针，创建我们秒针，秒针的话，我们在这来写一个直接来一个SEC second，这叫做SEC啊，SEC调整一下格式out shift加F格式化一下，然后在这呢，我们复制一下了啊。

这来设置我们这个秒针，秒针应该是最长的啊，我们这叫做一个ec csec，它的长度直接给到一个90%，90%，然后那个秒针的一个长度，我们SEC长度这儿不变，但是它要细一点，我们应该来一个两个像素，然后颜色的话也应该是一个红色的F00啊，给它设置一个红色，红色一个秒针对吧，它是这么一个效果，感觉稍微有点有点细是吧，有点细，有点有点短，我把这个秒这我调长一点，95%。95，哎，我给它调的长一点，这样好一点对吧？好，那现在我们的三个汁是不是就做完了呀？哎，其实很简单，你会做一个就全都出来了啊，会做一个全都出来了，然后现在我们要做的事就是让这个秒针旋转，旋转的这个函数，这个关键帧我们是不是已经有了呀？哎，这个是我们旋转的关键帧，旋转的一个关键帧我们这已经做好了，我们只需要设置就行了，那首先我们先设置秒针的秒针旋转，注意给谁旋转，是秒针旋转还是那个器旋转，哎，我们应该是要那个容器旋转，所以我们这个animation应该是给那个reber设置的，我们叫做一个这个run run的一个时间呢，秒针，因为我们这个设置的效果是转一圈对吧，转一圈，所以秒针转一圈应该是一个60秒，所以我让它花费60秒转一圈，那这样你看我的这个秒针是不是就开始转起来了啊，开始转起来，那现在它肯定就是转一圈，那应该是一分钟。

它应该会有点小误差，但是基本上就是一分钟转一圈啊，60秒我们的这个秒针就会完整的去转什么呀，诶转一圈啊，60秒就会转一圈，来我们看一下。

哎，你看是不是转的还挺好啊，哎，跟一个表一模一样对吧，一模一样，然后呢，就是如果说你会感觉其实这个有点太流畅了是吧？当然我们这个表也有这样的，但有时候我可能希望这个表有的表它是咔咔咔咔咔，它是不是一下一下转的呀，哎，一下一下转的，如果你希望达到这么一个效果，你可以用一个函数，用steps，我们是不是让它分步去转呀，诶来一个60，那这样这个秒针效果，你看它就是什么呀？哎，它就变成了一下一下就转啊，一下一下转那一圈它会正好就转什么呀？哎，转60下呀，诶感觉反正这两种风格吧，诶你可以用这个steps，或者你可以用什么呀？哎，用LA，它应该是一个匀速的运动，对吧？用steps或用LA LA lander都行，嗯，它是两种不同的一个什么呀？哎，不同的一个感觉啊，不同的一个感觉好，那这个是我们说的一个秒针，那如果但是这个转的有点太慢了是吧，太慢了我们把它调短一点，我们让它十秒，就是十秒转一圈啊，十秒转一圈，那这样转的速度就会比较。

什么呀，比较快了啊，比较快了，好秒针处理完了，然后我们这是不是还处理，但还得处理我们的这个分针啊，哎，分针同样也得转，找到我们这个分针的容器，分针的容器呢，注意了，分针就不是十秒了是吧？我秒针是十秒转一圈啊，我们就当十秒就是一分钟，那我们的分针应该是什么？我们秒针转了60圈一分钟，我们的这个我们的这个十针不是转60圈一小时对吧，转一一小时，我们的这个分针是不是才能转一圈啊，哎，转一圈，所以应该是他们应该是一个六六乘以60，所以应该是600秒啊，乘以60就是600秒，那等于说我们的十针，我们的分针秒针每转一圈，我的这个分针就会转什么呀，哎，就会转。一下对吧，就转一下，但是现在的话，这玩意儿直升就没了，所以我们还不要忘了给它加上一个这个菲尼，哎，我要让它干嘛呀，不停的转，不停的转，我们看看效果啊，我们现在看一下我们这个秒针和这个分针的配合，当然现在我这个表比较快是吧，你弄的时候你可以，当然你调慢了没必要，你调慢了你你你你真的一分钟一分钟看的比较痛苦，对吧，那现在基本上这样一个啊，我的这个哎，你看。

诶好，马上又要转一圈，他是不是又转了一下，哎，就说你看很准呢，秒针每转一圈，我们的这个分针就转一下，总共它会转什么呀？诶转这个转这个叫多少下，转这个60下是吧，一圈转60下嘛，这是我们的分针，然后我们十针呢，十针什么十针注意了，十针的话，实际上我们的。粘过来。十针，哎不是，这是我们的这个rapper这十针这个规则我们怎么指定，我们想一下十针的规则，十针的话，我们这儿一共是12个小时，对吧，一共是12个小时，12个小时呢，意味着什么呢？哎，我们整个对于我的时针来说，我这一圈实际上就是什么？就是12下对吧，一圈就是12下，一点两点三点，一直到12点，一圈就是12下，那就等于什么呢？等于我们这个分针啊，分针我转60下，我转60下一圈嘛，60分钟它是不是要转。

一下啊，哎，我要转60下，他就要转这个转一下，但是他说的是12下，我们不说下巴说下容易乱，我们说一圈，那我们一共是12:12个小时，那这个时候是不是等于我们这个分钟转了12圈，它就要转一圈，转12圈正好12个小时嘛，12个小时时针是不是正好转一圈了，所以他们的关系应该是一个应该是正好是我们的分钟，分钟是一个什么呀？是一个600 600是不是应该是乘以12，是我们小时赚的一个频率，所以这个时候我们是600乘以一个12，那应该就是一个72 72的话应该就是7200，所以它应该是一个7200，七千二转一下，当然你这儿的话，你要写steps，你就不能写60了，你得写什么了，你得写你得写12，因为它是一一个点转一下，对吧，一个点转一下，但是如果你这写12也不行，因为我们十针啊，它不是那么转的时针不是一小时。

转一下要动，转一下，它在秒针转的时候，分针转的时候，这个时针是不是就一点点在挪呀，哎，一点点挪，所以这个时候像我们的时针你就不适合用steps了，它就比较适合用什么呀，我们这个lineer匀速运动，这个时候它实际上时针它实际上一直都在动，只不过每一次动的这个会比较的微小，我们可能不太经意能能察觉到，那这样的话就比较符合一个我们的一个实际的一个什么呀，实际情况啊，实际情况好，我们这个表的三个指针就做完了啊，我们就做了一个这么真正的一个会转的表了，但是我们这个表有一个特点是吧，他没有办法告诉我们现在几点了，因为它每一次显示都是通过。

都是从12点开始算的，对吧？都是从零点开始算的，那这个时候如果你想让我们的这个表真正的和我们现在的时间有一个关联，那我们还得需要通过这个GS一个配合，不是我们现在讨论的范围，那我们就不管它了，那我们还要做的一个事儿就是表盘的问题，表盘当然我们可以用纯CSS做一个表盘是吧，这写个12341个个定位呗，感兴趣自己写一下，我就不写啊，你就给它定到这就行了啊，定到这就行了，我就懒得写了，我懒得写怎么办呢？哎，我这有现成的表盘的图片。资料。都是这个是我们这个动画，哎，你看我这是不是一个表盘的图片啊，哎，表盘图片，我直接把这个图片啊，我给你拿过来。拿过来以后的话，我在这儿直接新建一个文件夹，我们这是一个13 13的话把它拖进来改一个名，我们叫一个BG，那这里边我们就可以直接把这个东西设置为我们这个表的一个背景图片clock，来一个background，一个image，我们这直接来一个这个URL下的一个点斜杠，MG下的一个13下的一个BG，点一个PNNG，直接给它设置就行了，但是你设置上以后，你会发现表盘很很奇葩，是不是只显示一部分呀，因为表盘比较大，所以这个时候我们需要给它设置一下，它这个background，一个size，应该是一个是cover吧，给它铺满，哎，你看这样表盘是不是就铺满了，哎，你要把这个边框给它去了，其实还挺好看的，这一保存哎，那我们就做出了这么一个表，当然现在这个表转的有点哎。

偏快是吧，偏快，并且现在这个秒针也长了，秒针长了以后，它从那个表盘就出去了是吧，那这里我们这个秒针我可以稍微再调的小一点，哎，调回90吧，那开始指定那个数应该还合适，90 90，哎，那就这样一个效果对吧，就变成了一个，呃，等于用我们这个纯CSS做那么一个表，当然这个表盘我们用纯CSS也能画出来，你看这东西没有什么难点是吧，你们要感兴趣可以自己去画一下，当然这个表盘你不喜欢，我还有一个，还有一个。

资料动画是吧，还有鸭子表盘啊，哎，鸭子表盘你要用它的也行，诶这重名了是吧，改个名，这叫一个BT3吧，拖过来。BD3，诶你要想用它呢，也行，你这直接改成一个这个BD3，那就变成了鸭子表盘了，保存一下可以保存，诶鸭子鸭子鸭子不出来，鸭子是格式错了，GP里这一保存，哎，是不是鸭子就出来了，哎鸭子出来了啊，那这一块呢，你用哪个都行啊，用哪个都行啊，但是这鸭子感觉这个红色有点不太清楚了，你可以把这个指针呢，换一个颜色啊，换个颜色好表我们就做完了，那总之呢，就是对我们这个旋转啊，这个变形这个旋转的一个这个应用啊，应用这个东西自己写的时候呢，给它写写啊，其实挺有意思的啊，我们可以用这个CSS来做出一些很有意义的东西，挺好玩的是吧？哎，自己来做一下啊，耐着心做一下，写的时候呢，不明白的对照一下我的代码，我们先说这么多，停一下。