owl.carousel.css 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /*
  2. * Core Owl Carousel CSS File
  3. * v1.24
  4. */
  5. /* 代码整理:懒人之家 www.lanrenzhijia.com */
  6. /* clearfix */
  7. .owl-carousel .owl-wrapper:after {
  8. content: ".";
  9. display: block;
  10. clear: both;
  11. visibility: hidden;
  12. line-height: 0;
  13. height: 0;
  14. }
  15. /* display none until init */
  16. .owl-carousel{
  17. display: none;
  18. position: relative;
  19. width: 100%;
  20. -ms-touch-action: pan-y;
  21. }
  22. .owl-carousel .owl-wrapper{
  23. display: none;
  24. position: relative;
  25. -webkit-transform: translate3d(0px, 0px, 0px);
  26. }
  27. .owl-carousel .owl-wrapper-outer {
  28. /*overflow: hidden;*/
  29. position: relative;
  30. width: 100%;
  31. }
  32. .owl-carousel .owl-wrapper-outer.autoHeight{
  33. -webkit-transition: height 500ms ease-in-out;
  34. -moz-transition: height 500ms ease-in-out;
  35. -ms-transition: height 500ms ease-in-out;
  36. -o-transition: height 500ms ease-in-out;
  37. transition: height 500ms ease-in-out;
  38. }
  39. .owl-carousel .owl-item{
  40. float: left;
  41. }
  42. .owl-controls .owl-page,
  43. .owl-controls .owl-buttons div{
  44. cursor: pointer;
  45. }
  46. .owl-controls {
  47. -webkit-user-select: none;
  48. -khtml-user-select: none;
  49. -moz-user-select: none;
  50. -ms-user-select: none;
  51. user-select: none;
  52. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  53. }
  54. /* mouse grab icon */
  55. .grabbing {
  56. cursor:url(grabbing.png) 8 8, move;
  57. }
  58. /* fix */
  59. .owl-carousel .owl-wrapper,
  60. .owl-carousel .owl-item{
  61. -webkit-backface-visibility: hidden;
  62. -moz-backface-visibility: hidden;
  63. -ms-backface-visibility: hidden;
  64. -webkit-transform: translate3d(0,0,0);
  65. -moz-transform: translate3d(0,0,0);
  66. -ms-transform: translate3d(0,0,0);
  67. }
  68. /* CSS3 Transitions */
  69. .owl-origin {
  70. -webkit-perspective: 1200px;
  71. -webkit-perspective-origin-x : 50%;
  72. -webkit-perspective-origin-y : 50%;
  73. -moz-perspective : 1200px;
  74. -moz-perspective-origin-x : 50%;
  75. -moz-perspective-origin-y : 50%;
  76. perspective : 1200px;
  77. }
  78. /* fade */
  79. .owl-fade-out {
  80. z-index: 10;
  81. -webkit-animation: fadeOut .7s both ease;
  82. -moz-animation: fadeOut .7s both ease;
  83. animation: fadeOut .7s both ease;
  84. }
  85. .owl-fade-in {
  86. -webkit-animation: fadeIn .7s both ease;
  87. -moz-animation: fadeIn .7s both ease;
  88. animation: fadeIn .7s both ease;
  89. }
  90. /* backSlide */
  91. .owl-backSlide-out {
  92. -webkit-animation: backSlideOut 1s both ease;
  93. -moz-animation: backSlideOut 1s both ease;
  94. animation: backSlideOut 1s both ease;
  95. }
  96. .owl-backSlide-in {
  97. -webkit-animation: backSlideIn 1s both ease;
  98. -moz-animation: backSlideIn 1s both ease;
  99. animation: backSlideIn 1s both ease;
  100. }
  101. /* goDown */
  102. .owl-goDown-out {
  103. -webkit-animation: scaleToFade .7s ease both;
  104. -moz-animation: scaleToFade .7s ease both;
  105. animation: scaleToFade .7s ease both;
  106. }
  107. .owl-goDown-in {
  108. -webkit-animation: goDown .6s ease both;
  109. -moz-animation: goDown .6s ease both;
  110. animation: goDown .6s ease both;
  111. }
  112. /* scaleUp */
  113. .owl-fadeUp-in {
  114. -webkit-animation: scaleUpFrom .5s ease both;
  115. -moz-animation: scaleUpFrom .5s ease both;
  116. animation: scaleUpFrom .5s ease both;
  117. }
  118. .owl-fadeUp-out {
  119. -webkit-animation: scaleUpTo .5s ease both;
  120. -moz-animation: scaleUpTo .5s ease both;
  121. animation: scaleUpTo .5s ease both;
  122. }
  123. /* Keyframes */
  124. /*empty*/ /* 代码整理:懒人之家 www.lanrenzhijia.com */
  125. @-webkit-keyframes empty {
  126. 0% {opacity: 1}
  127. }
  128. @-moz-keyframes empty {
  129. 0% {opacity: 1}
  130. }
  131. @keyframes empty {
  132. 0% {opacity: 1}
  133. }
  134. @-webkit-keyframes fadeIn {
  135. 0% { opacity:0; }
  136. 100% { opacity:1; }
  137. }
  138. @-moz-keyframes fadeIn {
  139. 0% { opacity:0; }
  140. 100% { opacity:1; }
  141. }
  142. @keyframes fadeIn {
  143. 0% { opacity:0; }
  144. 100% { opacity:1; }
  145. }
  146. @-webkit-keyframes fadeOut {
  147. 0% { opacity:1; }
  148. 100% { opacity:0; }
  149. }
  150. @-moz-keyframes fadeOut {
  151. 0% { opacity:1; }
  152. 100% { opacity:0; }
  153. }
  154. @keyframes fadeOut {
  155. 0% { opacity:1; }
  156. 100% { opacity:0; }
  157. }
  158. @-webkit-keyframes backSlideOut {
  159. 25% { opacity: .5; -webkit-transform: translateZ(-500px); }
  160. 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  161. 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); }
  162. }
  163. @-moz-keyframes backSlideOut {
  164. 25% { opacity: .5; -moz-transform: translateZ(-500px); }
  165. 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  166. 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); }
  167. }
  168. @keyframes backSlideOut {
  169. 25% { opacity: .5; transform: translateZ(-500px); }
  170. 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  171. 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); }
  172. }
  173. @-webkit-keyframes backSlideIn {
  174. 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); }
  175. 75% { opacity: .5; -webkit-transform: translateZ(-500px); }
  176. 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); }
  177. }
  178. @-moz-keyframes backSlideIn {
  179. 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); }
  180. 75% { opacity: .5; -moz-transform: translateZ(-500px); }
  181. 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); }
  182. }
  183. @keyframes backSlideIn {
  184. 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); }
  185. 75% { opacity: .5; transform: translateZ(-500px); }
  186. 100% { opacity: 1; transform: translateZ(0) translateX(0); }
  187. }
  188. @-webkit-keyframes scaleToFade {
  189. to { opacity: 0; -webkit-transform: scale(.8); }
  190. }
  191. @-moz-keyframes scaleToFade {
  192. to { opacity: 0; -moz-transform: scale(.8); }
  193. }
  194. @keyframes scaleToFade {
  195. to { opacity: 0; transform: scale(.8); }
  196. }
  197. @-webkit-keyframes goDown {
  198. from { -webkit-transform: translateY(-100%); }
  199. }
  200. @-moz-keyframes goDown {
  201. from { -moz-transform: translateY(-100%); }
  202. }
  203. @keyframes goDown {
  204. from { transform: translateY(-100%); }
  205. }
  206. @-webkit-keyframes scaleUpFrom {
  207. from { opacity: 0; -webkit-transform: scale(1.5); }
  208. }
  209. @-moz-keyframes scaleUpFrom {
  210. from { opacity: 0; -moz-transform: scale(1.5); }
  211. }
  212. @keyframes scaleUpFrom {
  213. from { opacity: 0; transform: scale(1.5); }
  214. }
  215. @-webkit-keyframes scaleUpTo {
  216. to { opacity: 0; -webkit-transform: scale(1.5); }
  217. }
  218. @-moz-keyframes scaleUpTo {
  219. to { opacity: 0; -moz-transform: scale(1.5); }
  220. }
  221. @keyframes scaleUpTo {
  222. to { opacity: 0; transform: scale(1.5); }
  223. }