shutter.css 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. /* * {
  2. margin: 0;
  3. padding: 0;
  4. } */
  5. /* body {
  6. background-color: #333333;
  7. } */
  8. /* img {
  9. border: 0;
  10. vertical-align: top;
  11. } */
  12. /* ul,
  13. li {
  14. list-style: none;
  15. } */
  16. .shutter {
  17. overflow: hidden;
  18. width: 100%;
  19. height: 100vh;
  20. /* max-height: 860px; */
  21. position: relative;
  22. /* margin: 50px auto; */
  23. /* border-radius: 10px; */
  24. }
  25. .shutter-img {
  26. z-index: 1;
  27. }
  28. .shutter-img,
  29. .shutter-img a {
  30. position: absolute;
  31. left: 0;
  32. top: 0;
  33. width: 100%;
  34. height: 100%;
  35. }
  36. .shutter-img a {
  37. cursor: default;
  38. }
  39. .shutter-img a>img,
  40. .shutter-img a>div {
  41. width: 100%;
  42. height: 100%;
  43. }
  44. .animate-img {
  45. background-size: cover;
  46. background-position: center center
  47. }
  48. .shutter-img .created {
  49. overflow: hidden;
  50. position: absolute;
  51. z-index: 20;
  52. }
  53. .shutter-btn {}
  54. .shutter-btn li {
  55. position: absolute;
  56. z-index: 2;
  57. top: 50%;
  58. width: 49px;
  59. height: 49px;
  60. margin-top: -25px;
  61. cursor: pointer;
  62. }
  63. .shutter-btn li.prev {
  64. left: 20px;
  65. background: url(../images/shutter_prevBtn.png) no-repeat;
  66. }
  67. .shutter-btn li.next {
  68. right: 20px;
  69. background: url(../images/shutter_nextBtn.png) no-repeat;
  70. }
  71. .shutter-desc {
  72. position: absolute;
  73. z-index: 2;
  74. left: 0;
  75. bottom: 0;
  76. width: 100%;
  77. height: 36px;
  78. background: url(../images/shutter_shadow.png) repeat;
  79. }
  80. .shutter-desc p {
  81. padding-left: 20px;
  82. line-height: 36px;
  83. color: #fff;
  84. font-size: 14px;
  85. }
  86. @media(max-width:414px) {
  87. .shutter-btn li.prev,
  88. .shutter-btn li.next {
  89. background-size: cover
  90. }
  91. .shutter-btn li {
  92. width: 30px;
  93. height: 30px
  94. }
  95. }