* { margin:0; padding:0; list-style:none; text-decoration:none; } html,body { width:100%; height:100%; overflow:hidden; } .box { width:100%; height:100%; background:url(images/zwwbj.jpg) no-repeat center; background-size:cover; } .paw { width:100%; height:20px; background:#8d3835; position:relative; box-shadow:2px 2px 5px rgba(0,0,0,0.3) } .pawer { width:10px; background:#565656; height:20px; position:absolute; top:20px; left:50%; margin-left:-5px; box-shadow:2px 2px 5px rgba(0,0,0,0.3) } .pawerPic { width:110px; height:85px; position:absolute; top:40px; left:50%; margin-left:-55px; } .lose { width:100px; height:85px; display:block; margin:0 auto; } .pawerPic.on .lose { display:none; } .pawerPic.on .win { display:block; } .win { width:110px; height:105px; display:none; margin:0 auto; background:url(images/jiazi2.png); background-size:cover; overflow:hidden; } .win img { display:block; margin:0 auto; margin-top:12px; } .btn { width:120px; height:120px; position:absolute; bottom:0; left:50%; margin-left:-60px; } .btn2 { width:120px; height:120px; position:absolute; bottom:0; left:50%; margin-left:-60px; background:url(images/kaishi2.png) no-repeat center; background-size:contain; display:none; } .btn.on .btn_star { display:none; } .btn_star { background:url(images/kaishi.png) no-repeat center; background-size:contain; width:120px; height:120px; } .btn_end { background:url(images/kaishi2.png) no-repeat center; background-size:contain; width:120px; height:120px; } .area { width:100%; height:auto; overflow:hidden; position:absolute; top:40px; left:0; } /*娃娃滚动*/ #pack { width:100%; height:90px; white-space:nowrap; overflow:hidden; position:absolute; bottom:0; left:0; } #sel1,#sel2 { display:inline; } #pack img { display:inline-block; height:90px; }
注:需要在移动端查看效果,pc端点击无效