body,div,span,header,footer,nav,section,aside,article,ul,ol,dl,dt,dd,li,a,p,h1,h2,h3,h4,h5,h6,i,b,textarea,button,input,select,figure,figcaption,img {
padding:0;
margin:0;
list-style:none;
font-style:normal;
text-decoration:none;
font-weight:normal;
border:none;
box-sizing:border-box;
line-height:1;
font-family:"楷体",sans-serif;
-webkit-tap-highlight-color:transparent;
-webkit-font-smoothing:antialiased;
-webkit-text-size-adjust:none;
}
.feature {
width:100%;
height:800px;
}
/* 游戏特色 */
.feature {
}.feature ul {
position:relative;
width:100%;
height:100%;
}
.feature ul li {
cursor:pointer;
position:absolute;
width:90%;
height:100%;
top:0;
transition:all .5s;
}
.feature ul li:before {
position:absolute;
top:0;
left:0;
content:"";
width:100%;
height:100%;
background:rgba(0,0,0,0.8);
transition:all .5s;
}
.feature ul li.hover:before {
background:rgba(0,0,0,0);
}
.feature ul li span {
position:absolute;
z-index:2;
display:block;
width:100%;
height:200px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
opacity:1;
transition:all .5s;
}
.feature ul li.hover span {
opacity:0;
}
.feature ul li:nth-child(1) span {
float:right;
background:red;
}
.feature ul li:nth-child(2) span {
/* margin:0 auto;
*/
background:blue;
}
.feature ul li:nth-child(3) span {
float:left;
background:green;
}
.feature ul li:nth-child(1) {
background:pink;
z-index:2;
right:66.6%;
}
.feature ul li:nth-child(2) {
background:yellowgreen;
left:5%;
z-index:1;
}
.feature ul li:nth-child(3) {
background:yellow;
left:66.6%;
z-index:2;
}
.feature ul li:nth-child(1).hover {
right:10%;
}
.feature ul li:nth-child(2).hover {
left:5%;
}
.feature ul li:nth-child(3).hover {
left:10%;
}
.feature ul li:nth-child(1).active {
right:95%;
}
.feature ul li:nth-child(2).active {
left:5%;
}
.feature ul li:nth-child(3).active {
left:95%;
}
所用技能包括css3, jquery, 最外层三个小盒子可可根据需要显示或隐藏