使用css3实现简单的轮播图

利用css3做简单的轮播图

轮播图广泛出现在购物等网站上，下面我们利用css3做简单的轮播图。

看效果

HTML代码

	<div class="container">
		<div class="images">
			<img src="gtr.jpg">
			<img src="evo.jpg">
			<img src="sti.jpg">
		</div>
	</div>

css代码

.container{
			width: 500px;
			height: 350px;
			margin: 20vh auto 0;
			overflow: hidden; /*溢出隐藏，让不在div的图片先隐藏 */
		}
		.images{
			width: 1500px; /*此宽度为：图片的的宽度 * 图片的数量 */
			height: 350px;
			animation: move 10s infinite;
		}
		/* 设置图片的宽度和高度和外层div一样的宽高 */
		img{
			width: 500px;
			height: 350px;
			float: left;
		}
		@keyframes move{
			0%,25%{
				margin-left: 0px;
			}
			35%,70%{
				margin-left: -500px;
			}
			80%,100%{
				margin-left: -1000px;
			}
		}