simple.slide.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255
  1. body.none {
  2. overflow-x: hidden;
  3. overflow-y: hidden;
  4. display: block;
  5. }
  6. .LookPicture *:before,
  7. .LookPicture *:after {
  8. position: absolute;
  9. display: inline-block;
  10. background-repeat: no-repeat;
  11. content: "";
  12. }
  13. .LookPicture {
  14. -webkit-box-sizing: border-box;
  15. -moz-box-sizing: border-box;
  16. box-sizing: border-box;
  17. }
  18. .LookPicture * {
  19. -webkit-box-sizing: border-box;
  20. -moz-box-sizing: border-box;
  21. box-sizing: border-box;
  22. }
  23. .LookPicture_Background {
  24. position: fixed;
  25. top: 0;
  26. left: 0;
  27. z-index: 19960924;
  28. width: 100%;
  29. height: 100%;
  30. background-color: #000;
  31. display: none !important;
  32. }
  33. .LookPicture {
  34. position: fixed;
  35. top: 0;
  36. left: 0;
  37. z-index: 19960925;
  38. width: 100%;
  39. height: 100%;
  40. display: none;
  41. }
  42. .LookPicture .Look_Close {
  43. position: absolute;
  44. right:20%;
  45. top: 20px;
  46. display: inline-block;
  47. background-repeat: no-repeat;
  48. width: 45px;
  49. height: 45px;
  50. cursor: pointer;
  51. z-index: 19960925;
  52. background: url('/image/album/ico_colke.png') no-repeat center;
  53. }
  54. .LookPicture .Look_Close{
  55. transition: All 0.4s ease-in-out;
  56. -webkit-transition: All 0.4s ease-in-out;
  57. -moz-transition: All 0.4s ease-in-out;
  58. -o-transition: All 0.4s ease-in-out;
  59. }
  60. .LookPicture .Look_Close:hover {
  61. transform: rotate(180deg);
  62. -webkit-transform: rotate(180deg);
  63. -moz-transform: rotate(180deg);
  64. -o-transform: rotate(180deg);
  65. -ms-transform: rotate(180deg);
  66. }
  67. .LookPicture .Look_Close:hover:before,
  68. .LookPicture .Look_Close:hover:after {
  69. box-shadow: 0 0 10px #66ccff;
  70. -moz-box-shadow: 0 0 10px #66ccff;
  71. -webkit-box-shadow: 0 0 10px #66ccff;
  72. }
  73. .LookPicture .Look_Close:before {
  74. -webkit-transform: rotate(45deg);
  75. -ms-transform: rotate(45deg);
  76. -o-transform: rotate(45deg);
  77. transform: rotate(45deg);
  78. }
  79. .LookPicture .Look_Close:after {
  80. -webkit-transform: rotate(315deg);
  81. -ms-transform: rotate(315deg);
  82. -o-transform: rotate(315deg);
  83. transform: rotate(315deg);
  84. }
  85. .LookPicture .Look_img {
  86. display: none;
  87. position: absolute;
  88. max-width: 85%;
  89. max-height: 85%;
  90. top: 50%;
  91. left: 50%;
  92. z-index: 19960924;
  93. box-shadow: 0 0 20px #000;
  94. -moz-box-shadow: 0 0 20px #000;
  95. -webkit-box-shadow: 0 0 20px #000;
  96. border: 0;
  97. border-radius: 5px;
  98. -o-border-radius: 5px;
  99. -moz-border-radius: 5px;
  100. -webkit-border-radius: 5px;
  101. }
  102. .LookPicture .Look_img:hover {
  103. box-shadow: 0 0 20px #000000;
  104. -moz-box-shadow: 0 0 20px #000000;
  105. -webkit-box-shadow: 0 0 20px #000000;
  106. }
  107. .LookPicture .Look_img.Look_Show {
  108. display: block;
  109. }
  110. .LookPicture .Look_before {
  111. position: absolute;
  112. display: inline-block;
  113. background-repeat: no-repeat;
  114. width: 45px;
  115. height: 70px;
  116. z-index: 19960926;
  117. left: 15%;
  118. top: 50%;
  119. margin-top: -35px;
  120. cursor: pointer;
  121. -webkit-transition-property: all;
  122. -moz-transition-property: all;
  123. -o-transition-property: all;
  124. transition-property: all;
  125. -webkit-transition-duration: 0.3s;
  126. -moz-transition-duration: 0.3s;
  127. -o-transition-duration: 0.3s;
  128. transition-duration: 0.3s;
  129. -webkit-transition-delay: 0s;
  130. -moz-transition-delay: 0s;
  131. -o-transition-delay: 0s;
  132. transition-delay: 0s;
  133. }
  134. .LookPicture .Look_before:before,
  135. .LookPicture .Look_before:after {
  136. left: 0;
  137. width: 40px;
  138. height: 3px;
  139. background-color: #fff;
  140. border-radius: 10px;
  141. -o-border-radius: 10px;
  142. -moz-border-radius: 10px;
  143. -webkit-border-radius: 10px;
  144. -webkit-transition-property: all;
  145. -moz-transition-property: all;
  146. -o-transition-property: all;
  147. transition-property: all;
  148. -webkit-transition-duration: 0.3s;
  149. -moz-transition-duration: 0.3s;
  150. -o-transition-duration: 0.3s;
  151. transition-duration: 0.3s;
  152. -webkit-transition-delay: 0s;
  153. -moz-transition-delay: 0s;
  154. -o-transition-delay: 0s;
  155. transition-delay: 0s;
  156. }
  157. .LookPicture .Look_before:before {
  158. top: 50px;
  159. -webkit-transform: rotate(45deg);
  160. -ms-transform: rotate(45deg);
  161. -o-transform: rotate(45deg);
  162. transform: rotate(45deg);
  163. }
  164. .LookPicture .Look_before:after {
  165. top: 23px;
  166. -webkit-transform: rotate(315deg);
  167. -ms-transform: rotate(315deg);
  168. -o-transform: rotate(315deg);
  169. transform: rotate(315deg);
  170. }
  171. .LookPicture .Look_before:hover {
  172. left: 14.5%;
  173. }
  174. .LookPicture .Look_before:hover:before,
  175. .LookPicture .Look_before:hover:after {
  176. box-shadow: 0 0 20px #66ccff;
  177. -moz-box-shadow: 0 0 20px #66ccff;
  178. -webkit-box-shadow: 0 0 20px #66ccff;
  179. }
  180. .LookPicture .Look_next {
  181. position: absolute;
  182. display: inline-block;
  183. background-repeat: no-repeat;
  184. width: 45px;
  185. height: 70px;
  186. z-index: 19960926;
  187. right: 15%;
  188. top: 50%;
  189. margin-top: -35px;
  190. cursor: pointer;
  191. -webkit-transition-property: all;
  192. -moz-transition-property: all;
  193. -o-transition-property: all;
  194. transition-property: all;
  195. -webkit-transition-duration: 0.3s;
  196. -moz-transition-duration: 0.3s;
  197. -o-transition-duration: 0.3s;
  198. transition-duration: 0.3s;
  199. -webkit-transition-delay: 0s;
  200. -moz-transition-delay: 0s;
  201. -o-transition-delay: 0s;
  202. transition-delay: 0s;
  203. }
  204. .LookPicture .Look_next:before,
  205. .LookPicture .Look_next:after {
  206. left: 0;
  207. width: 40px;
  208. height: 3px;
  209. background-color: #fff;
  210. border-radius: 10px;
  211. -o-border-radius: 10px;
  212. -moz-border-radius: 10px;
  213. -webkit-border-radius: 10px;
  214. -webkit-transition-property: all;
  215. -moz-transition-property: all;
  216. -o-transition-property: all;
  217. transition-property: all;
  218. -webkit-transition-duration: 0.3s;
  219. -moz-transition-duration: 0.3s;
  220. -o-transition-duration: 0.3s;
  221. transition-duration: 0.3s;
  222. -webkit-transition-delay: 0s;
  223. -moz-transition-delay: 0s;
  224. -o-transition-delay: 0s;
  225. transition-delay: 0s;
  226. }
  227. .LookPicture .Look_next:before {
  228. top: 50px;
  229. -webkit-transform: rotate(315deg);
  230. -ms-transform: rotate(315deg);
  231. -o-transform: rotate(315deg);
  232. transform: rotate(315deg);
  233. }
  234. .LookPicture .Look_next:after {
  235. top: 23px;
  236. -webkit-transform: rotate(45deg);
  237. -ms-transform: rotate(45deg);
  238. -o-transform: rotate(45deg);
  239. transform: rotate(45deg);
  240. }
  241. .LookPicture .Look_next:hover {
  242. right: 14.5%;
  243. }
  244. .LookPicture .Look_next:hover:before,
  245. .LookPicture .Look_next:hover:after {
  246. box-shadow: 0 0 20px #66ccff;
  247. -moz-box-shadow: 0 0 20px #66ccff;
  248. -webkit-box-shadow: 0 0 20px #66ccff;
  249. }
  250. .Look_Open {
  251. display: block !important;
  252. }