今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

1、理清了轮播图的制作原理；

      昨天把轮播图的html的结构写出来了，图片也通过background嵌入li元素中，然后通过绝对定位来使背景图片改变位置。好了接下来就需要用到关键帧这个@keyframes选择器来制作动画效果，刚开始对于这一块不是很理解，因为查到的资料都是样例，第一次接触的表示看不懂，看了@keyframes这个规则后知道它的语法，也知道是和animation动画属性是一起使用的。今天在怎么制作动画效果的时候算是有点头绪了。

      制作动画效果的关键就是@keyframes，它的原理就是需要通过animation-iteration-count：infinite；规定动画应播放的次数可以无限循环。所以要让每张图片能够根据时间来循环，就需要用到animation-delay属性来让每张图片延迟的时间不一样，这里需要注意下animation-duration：time这个属性和delay属性之间的关系。一个是轮播图中整个图片持续的时长，一个是在做轮播效果每张图片需要延迟，以此来达到轮播动画的图片层次感，所以要处理好每张图片关键帧的延迟时间。所以这里就需要计算它的时间，我一直在查这个百分比的数值是怎么算的，现在算是知道了。

     我是这样理解的，例如：我设5张背景图片，animation-duration：总时长是20s，这里使用淡进淡出的动画效果，所以20s/5=4s（这里就是图片停留总的时间），每张图片是4s，这其中也要包含淡出的时间打比方是1s，4s-1s=3s（这个是图片停留的时间），3s换算成百分比就是15%，1s换算就是5%。

这些百分比怎么算的呢，我理解的公式：（图片停留的时间）/（整个动画的时长）=关键帧的百分比。

@keyframes img-item {

0% {

opacity：0；

   z-index：2；

}

5% {

   opacity：1；

   z-index：1；

}

20% {

   opacity：1；

   z-index：1；

}

25% {

   opacity：0；

   z-index：0；

}

}

然后就是算每张图片关键帧的延迟时间，第一张图片不需要淡进淡出所以是0%跳到5%，所以animation-delay为-1s，第二张与第一张隔20%，就是4s。-1s+4=3s，所以animation-delay为3s，后面的以此类推。

css代码：

轮播图的效果就做出来了，下面的轮播焦点制作原理也是一样的，用绝对定位布局，然后轮播效果套用就行了。

html的布局大致是一样的。

这里轮播焦点也不是要有点击效果，只是为了显示有几张图片以及图片当时所在的位置，所以这里animation-delay的延迟时间必须是一致的。又有一个问题是轮播焦点需要写两遍样式，一种是圆的样式，一种是animation动画效果。所以这里用了li元素在嵌套了一个div来写圆的样式，给li元素设置animation动画样式。

明天计划的事情：（一定要写非常细致的内容） 

任务中的三个重点基本上都写出来了，就是一些小细节需要调整，明天争取写完首页和职业推荐页面。

遇到的问题：（遇到什么困难，怎么解决的） 

    在写那个轮播图的小圆点，写出来发现用了animation效果后，但是圆的轮播样式效果没有出现，后来在检查代码的时候，发现是给@keyframes关键帧中运用animation-name写错了，导致没有轮播样式效果，尴尬...

     所以写代码一定要细心。

收获：（通过今天的学习，学到了什么知识）

对于轮播图的制作原理有了熟悉，还有animation和@keyframes规则的运用。