page2.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. /*
  2. * @Author: Marte
  3. * @Date: 2020-01-15 19:47:10
  4. * @Last Modified by: Marte
  5. * @Last Modified time: 2020-01-15 20:05:30
  6. */
  7. html, body, ul, li, p, img { margin:0; padding:0; }
  8. ul, ol { list-style:none; }
  9. img {border:none; padding:0;margin:0;outline-style:none; border:0; vertical-align:middle; display:block;}
  10. s,i,em{font-style:normal;text-decoration:none;}
  11. html{
  12. width:1280px;
  13. height:720px;
  14. margin: 0 auto;
  15. }
  16. body{
  17. width:1280px;
  18. height:720px;
  19. margin: 0 auto;
  20. font-size:20px;
  21. color: #f1f1f1;
  22. overflow: hidden;
  23. font-family:'Microsoft Yahei;Arial';
  24. }
  25. @-webkit-keyframes pulse {
  26. from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  27. 50% {-webkit-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);}
  28. to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  29. }
  30. @keyframes pulse {
  31. from {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  32. 50% {-webkit-transform: scale3d(1.05, 1.05, 1.05);transform: scale3d(1.05, 1.05, 1.05);}
  33. to {-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
  34. }
  35. .current{
  36. -webkit-animation: pulse .3s .02s ease both;
  37. -moz-animation: pulse .4s .02 ease both;
  38. }
  39. .current .u_img{
  40. border:4px solid #7f1020;
  41. border-radius: 10px;
  42. }
  43. .pulse {
  44. -webkit-animation-name: pulse;
  45. animation-name: pulse;
  46. }
  47. .cont{
  48. width:1280px;
  49. height:720px;
  50. background: url("../img/sort/bg.jpg") no-repeat center;
  51. background-size: 100%;
  52. }
  53. .first{
  54. position: absolute;
  55. top: 250px;
  56. left: 520px;
  57. }
  58. #topUl{
  59. position: absolute;
  60. top: 480px;
  61. left: 135px;
  62. }
  63. #topUl li{
  64. float: left;
  65. margin-right: 25px;
  66. margin-bottom: 20px;
  67. }
  68. .u_img{
  69. width: 231px;
  70. height: 152px;
  71. border-radius: 10px;
  72. box-shadow: 4px 4px 0 0 #7A0B18;
  73. overflow: hidden;
  74. position: relative;
  75. }
  76. .u_img.current{
  77. background: url(../img/btn_play.png) no-repeat center;
  78. }
  79. .u_img i{
  80. width: 60px;
  81. height: 26px;
  82. display: block;
  83. position: absolute;
  84. left: 170px;
  85. top: 127px;
  86. line-height: 28px;
  87. text-align: center;
  88. font-weight: bold;
  89. color: #4e4a4a;
  90. background: #00d3df;
  91. border-radius: 10px;
  92. }
  93. .u_msg{
  94. width: 231px;
  95. height: 40px;
  96. line-height: 38px;
  97. text-align: center;
  98. font-size: 18px;
  99. color: #7A0B18;
  100. font-weight: bold;
  101. }