body {
	background-image:url(img/bg.png);
	background-size:cover;
}
.container {
	width:600px;
	height:400px;
	border:20px solid #fff;
	margin:0 auto;
	position:relative;
}
/*
		   对图的部分进行布局
		   **/
		 .tu {
	width:600px;
	height:400px;
	position:absolute;
	left:0;
	top:0;
	/*设置为弹性盒子来进行四等份*/
		 	display:flex;
}
.tu>div {
	width:150px;
	height:400px;
	/*每个div占1份，分为四等份*/
		 	flex:1;
	position:relative;
	/*点击滑动超出div则隐藏*/
		 	overflow:hidden;
}
.tu>div>span {
	width:150px;
	height:400px;
	display:block;
	position:absolute;
	left:-150px;
	top:0;
}
.container >input {
	display:none;
}
.container > label {
	position:relative;
	z-index:9999;
	width:150px;
	height:40px;
	display:block;
	float:left;
	cursor:pointer;
	top:300px;
}
/*小球制作*/
		 .container>label:before {
	content:"1";
	display:block;
	width:35px;
	height:35px;
	background-color:rgba(130,195,213,.9);
	box-shadow:0px 0px 0px 4px rgba(255,255,255,.3);
	border-radius:50%;
	text-align:center;
	line-height:35px;
	position:absolute;
	left:60px;
	color:white;
}
/*修改小球里的文字*/
		.container>label:nth-child(5):before {
	content:"1";
}
.container>label:nth-child(6):before {
	content:"2";
}
.container>label:nth-child(7):before {
	content:"3";
}
.container>label:nth-child(8):before {
	content:"4";
}
.container> .xuan-1:checked ~ label:nth-child(5):before,.container> .xuan-2:checked ~ label:nth-child(6):before,.container> .xuan-3:checked ~ label:nth-child(7):before,.container> .xuan-4:checked ~ label:nth-child(8):before {
	color:rgba(130,195,213,.9);
	background-color:white;
}
/*放图片*/
		.tu>div>span:nth-child(1) {
	background-image:url(http://www.jq22.com/img/cs/500x500-1.png);
}
.tu>div>span:nth-child(2) {
	background-image:urlhttp://www.jq22.com/img/cs/500x500-2.png);
}
.tu>div>span:nth-child(3) {
	background-image:url(http://www.jq22.com/img/cs/500x500-3.png);
}
.tu>div>span:nth-child(4) {
	background-image:url(http://www.jq22.com/img/cs/500x500-4.png);
}
/*div下的所有span进行向左偏移*/
		.tu>div:nth-child(1)>span {
	background-position:0px 0px;
}
.tu>div:nth-child(2)>span {
	background-position:-150px 0px;
}
.tu>div:nth-child(3)>span {
	background-position:-300px 0px;
}
.tu>div:nth-child(4)>span {
	background-position:-450px 0px;
}
/*点击切换图片*/
.container>.xuan-1:checked~ .tu>div>span:nth-child(1),.container>.xuan-2:checked~ .tu>div>span:nth-child(2),.container>.xuan-3:checked~ .tu>div>span:nth-child(3),.container>.xuan-4:checked~ .tu>div>span:nth-child(4) {
	z-index:100;
	transition:left 0.5s ease-in-out;
	animation:none;
	left:0px;
}
/*所有背景进行移动*/
		input:checked~ .tu>div span {
	animation:play 0.6s ease-in-out 0s 1;
}
@keyframes play {
	0% {
	left:0px;
}
100% {
	left:150px;
}
}/*边框*/
		.container>label:after {
	width:1px;
	height:400px;
	background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	content:"";
	display:block;
	position:absolute;
	right:0;
	bottom:-60px;
}