学习动画制作

这次学习制作动画，用css和html制作了一个轮播图，本来打算做个皮卡丘放电，还没有学到哪一个部分，就只能在百度搜到了一个有关轮播图的代码，自己尝试着做了一部分。

css代码

.xing{
            width:1000px;
            height:800px;
            overflow: hidden;/*如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。
           hidden可以将地下多余的部分给隐藏起来*/
            margin:0 auto;//这一部分就是把图片在浏览器里面居中
        }
        .kong{
            width:calc(1000px *3);
            height:800px;
            -webkit-animation: switch 8s ease-out infinite normal;
        }
        /*swith是函数的名称，动画时长为8s ease-in-out规定以慢速开始和结束的过渡结果  一直循环  按照正常的顺序进行播放*/

        .kong>img{
            float: left;
            width:1000px;
            heigth:800px;
        }
       @-webkit-keyframes switch {
           0%, 25% {//第一张图片的播放时间
               margin-left: 0px;//第一张图片距离左侧的长度
           }
           30%, 60% {//第二张图片的播放时间
               margin-left: -1000px;//第一张图片距离左侧的长度
           }
           70%, 100% {//第三张图片的播放时间
               margin-left: -2000px;//第一张距离左边的距离
           }
       }

在css当中将轮播图的大小尺寸设定好之后，我在这儿有一个小问题就是在css里面,overflow的使用，在这里为了保证使插入的图片在图片播放的时候是正常播放的，因为在代码调试的时候故意删除掉了这一部分的代码，结果代码就出现了bug，整个轮播图就直接乱掉。

我觉得使用overflow这个属性就是使轮播图能够整齐的播放，缺点就是只会显示图片的一部分。

overflow:visible;//内容不会被修剪，会呈现在元素框之外
overflow:hidden//内容会被修剪，其余内容不可见
overflow:scroll//内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow:auto//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
overflow:inherit//规定应该从父元素继承overflow属性的值

margin: 0 auto;//就是将图片放在浏览器中间，即上下为0，左右适中

学习到了一个新的知识点，就是可以将三个图片同时设置属性值

calc()//函数
用法规则：
 width：calc(expression); 

calc的用法规则：
calc()的运算法则

1）、使用 "+"、"-"、"*" 和 "/" 运算

2）、可以使用百分比、px、em、rem等单位运算

3）、可以混合使用各种单位进行运算

4）、表达式中有 "+" 和 "-" 时，其前后必须有空格。

5）、表达式中有 "*" 和 "/" 时，其前后可以没有空格，但建议保留

想不通，这一块儿的代码，就是calc这一块儿代码的使用，目的是？

html代码

<div class="xing">//定义两个div，第一个div用来确定展示的大小
//即就是用来确定一个窗口
  <div class="kong">//第二个div用来实现图片的轮播。
     <img id="first" src="满天星空.jpg">
      <img src="极光.jpg">
      <img src="星空.jpg">
  </div>

轮播图实质上就是设置3000px的宽度，将三张图片的都设置的是向左浮动，其实就是让图片故意丢掉，只显示对应时间里的图片。

我自己是这样理解的，可能吧！