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.

166 lines
2.4 KiB

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. ul,
  6. li {
  7. list-style: none;
  8. }
  9. /*遮罩*/
  10. .mask {
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. z-index: 99;
  15. background: rgba(245, 224, 182, 0.4);
  16. display: none;
  17. }
  18. .imgs {
  19. /*background: url(../img/5.jpg) no-repeat;*/
  20. /*background-size: 100% 100%;*/
  21. position: relative;
  22. overflow: hidden;
  23. }
  24. .imgs img {
  25. width: 100%;
  26. height: 100%;
  27. position: absolute;
  28. }
  29. #container {
  30. position: absolute;
  31. left: 50%;
  32. top: 50%;
  33. transform: translate(-50%, -50%);
  34. /*z-index: 999;*/
  35. width: 55%;
  36. height: 90%;
  37. }
  38. #container canvas {
  39. width: 100% !important;
  40. height: 100% !important;
  41. opacity: 1;
  42. border-radius: 50%;
  43. }
  44. /*.xuanwo{
  45. position: absolute;
  46. left: 50%;
  47. top: 50%;
  48. transform: translate(-50%,-50%);
  49. width: 2rem;
  50. height: 2rem;
  51. }
  52. .xuanwo img{
  53. width: 100%;
  54. height: 100%;
  55. }*/
  56. /*翻书结束后的文字*/
  57. .bookImg {
  58. width: 100%;
  59. height: 100%;
  60. position: absolute;
  61. left: 0;
  62. top: 0;
  63. z-index: 99999;
  64. /*display: none;*/
  65. opacity: 0;
  66. }
  67. .bookImg img {
  68. width: 100%;
  69. height: 100%;
  70. }
  71. .word {
  72. position: absolute;
  73. left: 50%;
  74. top: 20%;
  75. display: none;
  76. /*display: flex;*/
  77. width: 65%;
  78. -webkit-transform: rotateX(30deg);
  79. -ms-transform: rotateX(30deg);
  80. -o-transform: rotateX(30deg);
  81. transform: rotateX(30deg);
  82. transform: translateX(-50%);
  83. }
  84. .word p {
  85. font-size: .25rem;
  86. }
  87. .word p.title {
  88. flex: 1;
  89. text-align: center;
  90. display: flex;
  91. align-items: center;
  92. justify-content: center;
  93. font-size: .45rem;
  94. margin-right:2rem;
  95. margin-top: -.5rem;
  96. height: 4.5rem;
  97. font-weight: bold;
  98. }
  99. .word p.contWord {
  100. width: 44%;
  101. height: 4.5rem;
  102. overflow-y: auto;
  103. display: none;
  104. }
  105. .bookImg .btn1 {
  106. position: absolute;
  107. left: 50%;
  108. bottom: 3%;
  109. z-index: 99999;
  110. display: none;
  111. transform: translateX(-50%);
  112. /*background: url(../img/game2/titleIcon.png) no-repeat;*/
  113. }
  114. .bookImg .btn1 span{
  115. font-size: .36rem;
  116. color: #fff;
  117. display: flex;
  118. /* margin: 0 auto; */
  119. justify-content: center;
  120. align-items: flex-end;
  121. width: 3.83rem;
  122. height: .72rem;
  123. line-height: .72rem;
  124. position: absolute;
  125. border-radius: 12px;
  126. left: 50%;
  127. bottom: 0%;
  128. background: rgba(0,0,0,0.5);
  129. transform: translateX(-50%);
  130. }
  131. .bookImg .btn1 p{
  132. width: 3.83rem;
  133. height: .72rem;
  134. background: #999;
  135. border-radius: 12px;
  136. margin: 0.5rem auto 0;
  137. color: #fff;
  138. font-size: .36rem;
  139. text-align: center;
  140. line-height: .82rem;
  141. }
  142. .bookImg .btn1 p.active{
  143. background: #E40006;
  144. }