编辑日

今天完成的事情：

1.完成css任务14使用纯css制作轮播图

2.学习JavaScript  

明天计划的事情：

1.完成css任务14

2.学习JavaScript

遇到的问题：

1.制作轮播图时，图片间出现间隙

   1）为什么img标签上下会有间隙？

        img标签为inline元素，该元素默认垂直对齐方式为父元素的baseline，但是展示时又是以bottomline为对齐方式，因此造成了上下两个img标签之间的间隙。

收获：

1. 使用CSS3 animation 属性和 @keyframes 规则进行轮播图的制作

    一，animation 属性

        animation基本用法是：animation: name keeping-time animate-function delay times iteration final;

        1）：name (animation-name)：

　        动画的名字，CSS3采用“关键帧 keyframes”来定义动画；

               @keyframes  name{

                                               0%{opacity: 0;}

                                               100%{opacity:1;}

                                              }    

        2）keeping-time (animation-duration)：

　　　　动画的持续时间，单位s或者ms（一定要带时间单位）；

        3）animate-function (animation-timing-function)：

　　　　（动画方式）的贝赛尔曲线，可取值有：ease、ease-in、ease-out、linear、ease-in-out、cubic-bezier(num1,num2,num3,num4)；

        4）delay (animation-delay)：

　　　　动画延迟执行的时间，单位为s或者ms{即使延迟时间为0，也必须加上时间单位，如果写成直接写成0，在Chrome和Safari(webkit)下是没问题的，但是在FF(gecko)下无效}；

        5）times (animation-iteration-count)：

　　　　动画循环执行的次数，使用infinite值为无限循环；

        6）iteration (animation-direction)：

　　　　如果动画循环，循环的方式有：alternate(偶数次向前播放，奇数次向后播放)和normal(每次都向前播放)；

        7）final (animation-fill-mode)：

　　　　动画达到100%时的状态，取值有：backward（回到初始状态）、forwards（停在最终状态）、none、both。

    二，@keyframes 规则

        通过 @keyframes 规则，能够创建动画。

        创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

        在动画过程中，能够多次改变这套 CSS 样式。

        以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

        0% 是动画的开始时间，100% 动画的结束时间。

        为了获得最佳的浏览器支持，应该始终定义 0% 和 100% 选择器。

报内容...