You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
#wrap { background: url(../img/game3/game3Bgm.png) no-repeat; background-size: 100% 100%; overflow: hidden; position: relative; }
.tipsNum { width: 1.45rem; height: 3.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: -33; }
.tipText { position: absolute; top: 40%; transform: translateY(-40%); right: .65rem; width: .8rem; height: 4.32rem; }
.tipText ul { display: flex; }
.tipText ul li { flex: 1; text-align: center; color: #333; font-size: .26rem; }
.tipsNum img { width: 100%; height: 100%; }
.titleIcon { margin-top: .1rem; margin-left: .1rem; }
.titleIcon ul { display: flex; justify-content: flex-end; }
.titleIcon ul li { width: .98rem; height: 1.24rem; }
.tipList ul li.active p { /*box-shadow: -6px 2px 18px #999;*/ background: url(../img/game2/active.png) no-repeat; background-size: 100% 100%; /*border-radius:10%;*/ }
.titleIcon ul li img { width: 100%; height: 100%; }
/*时间*/
.tipList { width: 90%; display: flex; margin-left: 1.45rem; }
.tipList ul { display: flex; width: 100%; }
.tipList ul li { /*flex: 1;*/ width: 18%; margin-right: .1rem; }
.tipList ul li p { height: .98rem; width: 2.17rem; background: url(../img/game2/titleIcon.png) no-repeat; background-size: 100%; font-size: .32rem; text-align: center; box-sizing: border-box; padding: .18rem .2rem; color: #fff; display: flex; align-items: center; justify-content: center; }
.cont_wrap { width: 100%; position: absolute; z-index: -1; /*margin-top: 1.76rem;*/ }
.faceList { width: 90%; margin-left: 1.35rem; display: flex; flex-wrap: wrap; /*justify-content: space-between;*/ }
.faceList li { width: 19%; height: 1.99rem; margin-right: .1rem; /*margin-bottom: 1.26rem;*/ }
.faceList p.fontImg, .faceList p.backImg { width: 1.99rem; height: 1.74rem; }
.faceList li img { /*width: 2.5rem;*/ width: 100%; height: 1.74rem; }
.faceItem { perspective: 1000px; -webkit-perspective: 1000px; /*父类容器中 perspective 子类允许透视*/ -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; margin: 0px auto; /*margin-left: 20px;*/ margin-bottom: .2rem; }
.faceList li.last { margin-top: 2rem; }
.faceList li .backShow { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); z-index: 1 }
.faceList li .fontShow { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); z-index: 2; }
.fontImg, .backImg { backface-visibility: hidden; -webkit-transition: .6s ease-out; -moz-transition: .6s ease-out; -ms-transition: .6s ease-out; -o-transition: .6s ease-out; transition: 0.6s ease-out; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; top: 0; left: 0; }
.fontImg { z-index: 1; transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); }
.backImg { z-index: 2; transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); }
p.guize { /*width: 50%;*/ position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); }
p.guize span { display: block; /*width: 90%;*/ font-size: 0.3rem; color: #333; /*border: 1px dotted #D01217;*/ margin: .1rem 0 .3rem 0; padding: .3rem .1rem; /*box-sizing: border-box;*/ }
/*中间的成功框*/
.middleImg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 20%; display: flex; justify-content: space-between; align-items: center; }
.middleImg ul:first-child { margin-left: 1.45rem; }
.middleImg ul { width: 90%; margin-top: 1rem; }
.middleImg ul li { display: none; }
.middleImg ul li:nth-child(1) { display: block; width: 1.99rem; height: 1.74rem; }
.middleImg ul li p.img { width: 1.99rem; height: 1.74rem; }
.middleImg ul li img { width: 100%; height: 100%; }
.middleImg ul li p.text { font-size: .22rem; color: #D21B20; text-align: center; font-weight: bold; }
/*手势*/
.mask { display: block; /*z-index: ;*/ }
.shoushi { position: absolute; right: -4.42rem; bottom: 1.16rem; }
.shoushi img { width: 50%; height: 50%; }
|