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, 最外层三个小盒子可可根据需要显示或隐藏