这次学习制作动画，用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>
