轮播图(animation)

CSS的内容不多，而且每一项单独看都很简单，但是把这些知识点揉在一起，就成了一个大问题，所以啊，不时的写个好玩的特效来学习CSS，既有趣又可以学习，这样多好啊！

今天就先做个轮播图吧。

首先是HTML部分

<div id="box">
	<div id="pic">
			<img id="one" src="images/1.jpg" alt="图片">
			<img id="two" src="images/2.jpg" alt="图片">
			<img id="three" src="images/3.jpg" alt="图片">
			<img id="four" src="images/4.jpg" alt="图片">
			<img id="five" src="images/5.jpg" alt="图片">
			<img id="six" src="images/6.jpg" alt="图片">
			
	</div>
</div>

说一下思路吧。外层的div是视图框，也就是可见域，超出的部分隐藏起来；内层的div呢，就是轮播内容的集合，通过这个区域的移动来实现图片轮播的效果。

下面上CSS部分的代码

 @charset "utf-8";
/* CSS Document */
*{
	padding: 0;
	margin: 0;
}
#box{
	width: 200px;
	height: 126px;
	position: absolute;
	overflow: hidden;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#pic{
	width: 1200px;
	height: 126px;
} 
#pic>img{
	width: 200px;
	height: 126px;
	position: absolute;
}
/*通过区域图片的位移，滑动，隐藏做出效果*/
#pic{
	animation: move 18s linear normal infinite forwards;
}
@keyframes move{
	0%,12%{
		margin-left: 0;
	}
	15%,27%{
		margin-left: 200px;
	}
	30%,42%{
		margin-left: 400px;
	}
	45%,57%{
		margin-left: 600px;
	}
	60%,72%{
		margin-left: 800px;
	}
	74%,100%{margin-left: 1000px;
	}
}
#one{
	transform: translate(0,0);
}
#two{
	transform: translate(-200px,0);
}
#three{
	transform: translate(-400px,0);
}
#four{
	transform: translate(-600px,0);
}
#five{
	transform: translate(-800px,0);
}
#six{
	transform: translate(-1000px,0);
}

这里用到了CSS中的animation来达到动态的效果，那就讲一下animation的用法吧

animation一共有7个属性值

属性值	含义	可选值
name	动画名称	自定义
duration	动画持续事件	秒
timing-function	时间函数	linear(匀速) ease(慢快慢) ease-in(一值开始画面，然后瞬间结束) ease-end(一值结束画面，然后瞬间结束)
delay	延迟时间	秒
iteration-count	次数	infinite(无数次) 自定义次数
direction	方向	normal(正序) reverse(倒序) alternate(交替播放，奇数次正序，偶数次倒序) alternate-reverse(反向交替，奇数次倒序，偶数次正序)
fill-mode	动画前后的样式	none(不改变) forwards(保持动画最后一帧) backwards(保持动画第一帧) both(执行forwards和backwards)

通过@keyframes animation.name 来定义关键帧时的样式，也就是定义一些特定时刻的静态样式，来实现轮播效果。

/*这是以上轮播图的关键帧*/
@keyframes move{
/*控制左侧的外边距*/
	0%,12%{
	/*在0-12%时间段内，左侧外边距为0*/
		margin-left: 0;
	}
	15%,27%{
		margin-left: 200px;
	}
	30%,42%{
		margin-left: 400px;
	}
	45%,57%{
		margin-left: 600px;
	}
	60%,72%{
		margin-left: 800px;
	}
	74%,100%{margin-left: 1000px;
	}
}