cpxx.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. /* 标题区域:浅色风格配色 */
  2. .carousel-title {
  3. text-align: center;
  4. margin-bottom: 40px;
  5. display: flex; /* 开启弹性布局 */
  6. justify-content: center; /* 水平居中(左右居中) */
  7. width: 100%;
  8. }
  9. .main-title {
  10. font-size: 48px;
  11. color: #1e40af;
  12. /* 深蓝色主标题 */
  13. font-weight: 600;
  14. margin-bottom: 12px;
  15. }
  16. .sub-title {
  17. font-size: 24px;
  18. color: #3b82f6;
  19. /* 浅蓝色副标题 */
  20. display: flex;
  21. align-items: center;
  22. justify-content: center;
  23. gap: 8px;
  24. }
  25. .sub-title .icon {
  26. width: 28px;
  27. height: 28px;
  28. background: radial-gradient(#93c5fd, #3b82f6);
  29. /* 浅蓝渐变图标 */
  30. border-radius: 50%;
  31. display: flex;
  32. align-items: center;
  33. justify-content: center;
  34. color: #fff;
  35. font-size: 14px;
  36. }
  37. /* 轮播容器核心:相对定位,控制卡片层叠 */
  38. .carousel-container {
  39. position: relative;
  40. width: 100%;
  41. height: 600px;
  42. overflow: hidden;
  43. }
  44. /* 轮播卡片容器:绝对定位,统一控制所有卡片 */
  45. .carousel-cards {
  46. position: absolute;
  47. top: 0;
  48. left: 0;
  49. width: 100%;
  50. height: 100%;
  51. }
  52. /* 轮播卡片通用样式:浅色背景 */
  53. .carousel-card {
  54. position: absolute;
  55. top: 0;
  56. left: 0;
  57. width: 50%;
  58. height: 450px;
  59. background: rgba(255, 255, 255, 0.95);
  60. /* 白色半透明卡片 */
  61. border: 1px solid #e2e8f0;
  62. /* 浅灰色边框 */
  63. border-radius: 16px;
  64. overflow: hidden;
  65. display: flex;
  66. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  67. /* 轻微阴影增强层次感 */
  68. transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  69. z-index: 1;
  70. opacity: 0;
  71. transform: translateX(0) scale(0.85);
  72. }
  73. /* 激活卡片:居中置顶,完全显示 */
  74. .carousel-card.active {
  75. left: 50%;
  76. transform: translateX(-50%) scale(1);
  77. opacity: 1;
  78. z-index: 10;
  79. box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  80. /* 激活卡片增强阴影 */
  81. }
  82. /* 左侧卡片:左偏移,半透明,层级低于激活卡片 */
  83. .carousel-card.prev {
  84. left: -20%;
  85. opacity: 0.6;
  86. /* 浅色版提高透明度,保证可见性 */
  87. transform: translateX(0) scale(0.85);
  88. z-index: 5;
  89. }
  90. /* 右侧卡片:右偏移,半透明,层级低于激活卡片 */
  91. .carousel-card.next {
  92. left: 70%;
  93. opacity: 0.6;
  94. transform: translateX(0) scale(0.85);
  95. z-index: 5;
  96. }
  97. /* 卡片内容区域:文字部分(深色文字适配浅色背景) */
  98. .card-content {
  99. flex: 1;
  100. padding: 60px 50px;
  101. color: #1e293b;
  102. /* 深灰色文字 */
  103. }
  104. .card-content h3 {
  105. font-size: 32px;
  106. margin-bottom: 24px;
  107. color: #0f172a;
  108. /* 近黑色标题 */
  109. }
  110. .card-content p {
  111. font-size: 16px;
  112. line-height: 1.8;
  113. color: #475569;
  114. /* 中灰色正文 */
  115. margin-bottom: 40px;
  116. max-width: 400px;
  117. }
  118. .card-btn {
  119. display: inline-flex;
  120. align-items: center;
  121. gap: 8px;
  122. padding: 12px 24px;
  123. background: #3b82f6;
  124. /* 蓝色按钮 */
  125. color: #ffffff;
  126. /* 白色文字 */
  127. border-radius: 30px;
  128. text-decoration: none;
  129. font-size: 16px;
  130. font-weight: 500;
  131. transition: all 0.3s ease;
  132. border: none;
  133. cursor: pointer;
  134. }
  135. .card-btn:hover {
  136. background: #2563eb;
  137. /* 按钮hover加深 */
  138. transform: translateY(-2px);
  139. box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
  140. }
  141. /* 卡片图片区域 */
  142. .card-image {
  143. flex: 1.2;
  144. height: 100%;
  145. background-size: cover;
  146. background-position: center;
  147. opacity: 0.95;
  148. /* 图片轻微降透,适配浅色 */
  149. }
  150. /* 轮播控制箭头:浅色风格 */
  151. .carousel-arrow {
  152. position: absolute;
  153. bottom: 0px;
  154. width: 50px;
  155. height: 50px;
  156. border-radius: 50%;
  157. background: rgba(59, 130, 246, 0.1);
  158. /* 浅蓝色半透明箭头 */
  159. border: 1px solid #bfdbfe;
  160. /* 浅蓝边框 */
  161. color: #1e40af;
  162. /* 深蓝色箭头图标 */
  163. font-size: 20px;
  164. cursor: pointer;
  165. z-index: 20;
  166. transition: all 0.3s ease;
  167. }
  168. .carousel-arrow:hover {
  169. background: rgba(59, 130, 246, 0.2);
  170. /* hover加深 */
  171. border-color: #93c5fd;
  172. }
  173. .arrow-prev {
  174. left: 50%;
  175. transform: translateX(-100px);
  176. }
  177. .arrow-next {
  178. left: 50%;
  179. transform: translateX(40px);
  180. }
  181. /* 响应式适配:小屏幕自动调整 */
  182. @media (max-width: 1200px) {
  183. .carousel-container {
  184. width: 90%;
  185. }
  186. .carousel-card {
  187. width: 80%;
  188. }
  189. .card-content {
  190. padding: 40px 30px;
  191. }
  192. }