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.

298 lines
4.6 KiB

  1. #wrap {
  2. background: url(../img/game3/game3Bgm.png) no-repeat;
  3. background-size: 100% 100%;
  4. overflow: hidden;
  5. position: relative;
  6. }
  7. .tipsNum {
  8. width: 1.45rem;
  9. height: 3.2rem;
  10. position: absolute;
  11. left: 0;
  12. top: 50%;
  13. transform: translateY(-50%);
  14. z-index: -33;
  15. }
  16. .tipText {
  17. position: absolute;
  18. top: 40%;
  19. transform: translateY(-40%);
  20. right: .65rem;
  21. width: .8rem;
  22. height: 4.32rem;
  23. }
  24. .tipText ul {
  25. display: flex;
  26. }
  27. .tipText ul li {
  28. flex: 1;
  29. text-align: center;
  30. color: #333;
  31. font-size: .26rem;
  32. }
  33. .tipsNum img {
  34. width: 100%;
  35. height: 100%;
  36. }
  37. .titleIcon {
  38. margin-top: .1rem;
  39. margin-left: .1rem;
  40. }
  41. .titleIcon ul {
  42. display: flex;
  43. justify-content: flex-end;
  44. }
  45. .titleIcon ul li {
  46. width: .98rem;
  47. height: 1.24rem;
  48. }
  49. .tipList ul li.active p {
  50. /*box-shadow: -6px 2px 18px #999;*/
  51. background: url(../img/game2/active.png) no-repeat;
  52. background-size: 100% 100%;
  53. /*border-radius:10%;*/
  54. }
  55. .titleIcon ul li img {
  56. width: 100%;
  57. height: 100%;
  58. }
  59. /*时间*/
  60. .tipList {
  61. width: 90%;
  62. display: flex;
  63. margin-left: 1.45rem;
  64. }
  65. .tipList ul {
  66. display: flex;
  67. width: 100%;
  68. }
  69. .tipList ul li {
  70. /*flex: 1;*/
  71. width: 18%;
  72. margin-right: .1rem;
  73. }
  74. .tipList ul li p {
  75. height: .98rem;
  76. width: 2.17rem;
  77. background: url(../img/game2/titleIcon.png) no-repeat;
  78. background-size: 100%;
  79. font-size: .32rem;
  80. text-align: center;
  81. box-sizing: border-box;
  82. padding: .18rem .2rem;
  83. color: #fff;
  84. display: flex;
  85. align-items: center;
  86. justify-content: center;
  87. }
  88. .cont_wrap {
  89. width: 100%;
  90. position: absolute;
  91. z-index: -1;
  92. /*margin-top: 1.76rem;*/
  93. }
  94. .faceList {
  95. width: 90%;
  96. margin-left: 1.35rem;
  97. display: flex;
  98. flex-wrap: wrap;
  99. /*justify-content: space-between;*/
  100. }
  101. .faceList li {
  102. width: 19%;
  103. height: 1.99rem;
  104. margin-right: .1rem;
  105. /*margin-bottom: 1.26rem;*/
  106. }
  107. .faceList p.fontImg,
  108. .faceList p.backImg {
  109. width: 1.99rem;
  110. height: 1.74rem;
  111. }
  112. .faceList li img {
  113. /*width: 2.5rem;*/
  114. width: 100%;
  115. height: 1.74rem;
  116. }
  117. .faceItem {
  118. perspective: 1000px;
  119. -webkit-perspective: 1000px;
  120. /*父类容器中 perspective 子类允许透视*/
  121. -moz-perspective: 1000px;
  122. -ms-perspective: 1000px;
  123. -o-perspective: 1000px;
  124. perspective: 1000px;
  125. margin: 0px auto;
  126. /*margin-left: 20px;*/
  127. margin-bottom: .2rem;
  128. }
  129. .faceList li.last {
  130. margin-top: 2rem;
  131. }
  132. .faceList li .backShow {
  133. transform: rotateY(180deg);
  134. -webkit-transform: rotateY(180deg);
  135. -moz-transform: rotateY(180deg);
  136. -ms-transform: rotateY(180deg);
  137. -o-transform: rotateY(180deg);
  138. z-index: 1
  139. }
  140. .faceList li .fontShow {
  141. transform: rotateY(0deg);
  142. -webkit-transform: rotateY(0deg);
  143. -moz-transform: rotateY(0deg);
  144. -ms-transform: rotateY(0deg);
  145. -o-transform: rotateY(0deg);
  146. z-index: 2;
  147. }
  148. .fontImg,
  149. .backImg {
  150. backface-visibility: hidden;
  151. -webkit-transition: .6s ease-out;
  152. -moz-transition: .6s ease-out;
  153. -ms-transition: .6s ease-out;
  154. -o-transition: .6s ease-out;
  155. transition: 0.6s ease-out;
  156. -webkit-transform-style: preserve-3d;
  157. -moz-transform-style: preserve-3d;
  158. -ms-transform-style: preserve-3d;
  159. -o-transform-style: preserve-3d;
  160. transform-style: preserve-3d;
  161. position: absolute;
  162. top: 0;
  163. left: 0;
  164. }
  165. .fontImg {
  166. z-index: 1;
  167. transform: rotateY(-180deg);
  168. transform: rotateY(-180deg);
  169. -webkit-transform: rotateY(-180deg);
  170. -moz-transform: rotateY(-180deg);
  171. -ms-transform: rotateY(-180deg);
  172. -o-transform: rotateY(-180deg);
  173. }
  174. .backImg {
  175. z-index: 2;
  176. transform: rotateY(0deg);
  177. transform: rotateY(0deg);
  178. -webkit-transform: rotateY(0deg);
  179. -moz-transform: rotateY(0deg);
  180. -ms-transform: rotateY(0deg);
  181. -o-transform: rotateY(0deg);
  182. }
  183. p.guize {
  184. /*width: 50%;*/
  185. position: absolute;
  186. left: 50%;
  187. top: 55%;
  188. transform: translate(-50%, -50%);
  189. }
  190. p.guize span {
  191. display: block;
  192. /*width: 90%;*/
  193. font-size: 0.3rem;
  194. color: #333;
  195. /*border: 1px dotted #D01217;*/
  196. margin: .1rem 0 .3rem 0;
  197. padding: .3rem .1rem;
  198. /*box-sizing: border-box;*/
  199. }
  200. /*中间的成功框*/
  201. .middleImg {
  202. position: absolute;
  203. left: 50%;
  204. top: 50%;
  205. transform: translate(-50%, -50%);
  206. width: 100%;
  207. height: 20%;
  208. display: flex;
  209. justify-content: space-between;
  210. align-items: center;
  211. }
  212. .middleImg ul:first-child {
  213. margin-left: 1.45rem;
  214. }
  215. .middleImg ul {
  216. width: 90%;
  217. margin-top: 1rem;
  218. }
  219. .middleImg ul li {
  220. display: none;
  221. }
  222. .middleImg ul li:nth-child(1) {
  223. display: block;
  224. width: 1.99rem;
  225. height: 1.74rem;
  226. }
  227. .middleImg ul li p.img {
  228. width: 1.99rem;
  229. height: 1.74rem;
  230. }
  231. .middleImg ul li img {
  232. width: 100%;
  233. height: 100%;
  234. }
  235. .middleImg ul li p.text {
  236. font-size: .22rem;
  237. color: #D21B20;
  238. text-align: center;
  239. font-weight: bold;
  240. }
  241. /*手势*/
  242. .mask {
  243. display: block;
  244. /*z-index: ;*/
  245. }
  246. .shoushi {
  247. position: absolute;
  248. right: -4.42rem;
  249. bottom: 1.16rem;
  250. }
  251. .shoushi img {
  252. width: 50%;
  253. height: 50%;
  254. }