* {
margin:0;
padding:0;
}
.box {
margin-top:300px;
width:100%;
height:340px;
position:relative;
}
.list {
width:1200px;
height:300px;
overflow:hidden;
position:absolute;
left:50%;
margin-left:-600px;
}
.btn {
position:absolute;
top:50%;
margin-top:-50px;
width:60px;
height:100px;
line-height:100px;
font-size:30px;
color:#fff;
text-decoration:none;
text-align:center;
background:#333;
cursor:pointer;
}
.next {
right:0;
}
li {
position:absolute;
top:0;
left:0;
list-style:none;
opacity:0;
transition:all 0.3s ease-out;
}
img {
width:751px;
height:300px;
border:none;
float:left;
}
.p1 {
transform:translate3d(-224px,0,0) scale(0.81);
}
.p2 {
transform:translate3d(0px,0,0) scale(0.81);
transform-origin:0 50%;
opacity:0.8;
z-index:2;
}
.p3 {
transform:translate3d(224px,0,0) scale(1);
z-index:3;
opacity:1;
}
.p4 {
transform:translate3d(449px,0,0) scale(0.81);
transform-origin:100% 50%;
opacity:0.8;
z-index:2;
}
.p5 {
transform:translate3d(672px,0,0) scale(0.81);
}
.p6 {
transform:translate3d(896px,0,0) scale(0.81);
}
.p7 {
transform:translate3d(1120px,0,0) scale(0.81);
}
.buttons {
position:absolute;
width:1200px;
height:30px;
bottom:0;
left:50%;
margin-left:-600px;
text-align:center;
padding-top:10px;
}
.buttons a {
display:inline-block;
width:35px;
height:5px;
padding-top:4px;
cursor:pointer;
}
span {
display:block;
width:35px;
height:1px;
background:red;
}
.blue {
background:blue;
}