@import url(http://fonts.googleapis.com/css?family=Raleway|Pacifico);
body {
	margin-top: 7%;
	background: #1ca5c7;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMxY2E1YzciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMTY1NDdiIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-radial-gradient(center, ellipse cover, #1ca5c7 0%, #16547b 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #1ca5c7), color-stop(100%, #16547b));
	background: -webkit-radial-gradient(center, ellipse cover, #1ca5c7 0%, #16547b 100%);
	background: -o-radial-gradient(center, ellipse cover, #1ca5c7 0%, #16547b 100%);
	background: -ms-radial-gradient(center, ellipse cover, #1ca5c7 0%, #16547b 100%);
	background: radial-gradient(ellipse at center, #1ca5c7 0%, #16547b 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1ca5c7', endColorstr='#16547b', GradientType=1 );
	background-repeat: no-repeat;
	background-attachment: fixed;
	font-family: Raleway;
	text-align: center;
	color: #fff;
}
a {
	color: #fff;
	font-family: Raleway;
	font-style: normal;
	text-decoration: none;
	font-size: 15px;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font-family: Raleway;
	font-weight: normal;
	margin: 0;
}
#container {
	display: block;
	margin: 0 auto;
	text-align: center;
	-webkit-perspective: 2000px;
	-moz-perspective: 2000px;
	-ms-perspective: 2000px;
	-o-perspective: 2000px;
	perspective: 2000px;
}
#information {
	margin-top: 1em;
	display: block;
	font-size: 15px;
}
#itemdescription {
	position: relative;
	width: 400px;
	margin: 0 auto;
	left: 6em;
	top: 2em;
	font-size: 50px;
	font-family: Pacifico;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
#itemdescription span {
	display: none;
}
#itemlist {
	display: block;
	width: 400px;
	margin: 3em auto;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
#itemlist img {
	position: absolute;
	cursor: pointer;
	left: 0;
	box-shadow: 0px 15px 50px rgba(0, 0, 0, 0.4);
}
#itemlist img:hover {
	top: -5px;
}
#itemlist img.item-0 {
	z-index: 4;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}
#itemlist img.item-1 {
	z-index: 3;
	left: -80px;
	-webkit-transform: scale(0.9);
	-moz-transform: scale(0.9);
	-ms-transform: scale(0.9);
	-o-transform: scale(0.9);
	transform: scale(0.9);
}
#itemlist img.item-2 {
	z-index: 2;
	left: -160px;
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-ms-transform: scale(0.8);
	-o-transform: scale(0.8);
	transform: scale(0.8);
}
#itemlist img.item-3 {
	z-index: 1;
	left: -240px;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
}
.transition {
	-webkit-transition: 0.5s ease-out;
	-moz-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	transition: 0.5s ease-out;
}
.show {
	-webkit-animation: show 1s linear;
	-moz-animation: show 1s linear;
	-ms-animation: show 1s linear;
	-o-animation: show 1s linear;
	animation: show 1s linear;
}
 @-webkit-keyframes show {
 25% {
 left: -450px;
}
 50% {
 z-index: 5;
 left: -500px;
 -webkit-transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 5;
 left: -250px;
 -webkit-transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 5;
 left: 0px;
 -webkit-transform: rotate3d(0, 1, 0, 360deg);
}
}
 @-moz-keyframes show {
 25% {
 left: -450px;
}
 50% {
 z-index: 5;
 left: -500px;
 -moz-transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 5;
 left: -250px;
 -moz-transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 5;
 left: 0px;
 -moz-transform: rotate3d(0, 1, 0, 360deg);
}
}
 @-ms-keyframes show {
 25% {
 left: -450px;
}
 50% {
 z-index: 5;
 left: -500px;
 -ms-transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 5;
 left: -250px;
 -ms-transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 5;
 left: 0px;
 -ms-transform: rotate3d(0, 1, 0, 360deg);
}
}
 @-o-keyframes show {
 25% {
 left: -450px;
}
 50% {
 z-index: 5;
 left: -500px;
 -o-transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 5;
 left: -250px;
 -o-transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 5;
 left: 0px;
 -o-transform: rotate3d(0, 1, 0, 360deg);
}
}
 @keyframes show {
 25% {
 left: -450px;
}
 50% {
 z-index: 5;
 left: -500px;
 transform: rotate3d(0, 1, 0, 0deg);
}
 70% {
 z-index: 5;
 left: -250px;
 transform: rotate3d(0, 1, 0, 180deg);
}
 100% {
 z-index: 5;
 left: 0px;
 transform: rotate3d(0, 1, 0, 360deg);
}
}
/* 代码提供：懒人之家 jb51.net */