风大四发安抚打算

css/index.css

@@ -313,22 +313,49 @@
   box-shadow: 0 16px 48px rgba(56, 189, 248, 0.6);
 }
 
-/* 分页器优化 */
+/* 分页器优化 - 带播放进度条 */
 .banner-cont .swiper-pagination-bullet {
-  width: 40px;
+  width: 60px;
   height: 4px;
   background: rgba(148, 163, 184, 0.3);
   opacity: 1;
   border-radius: 2px;
   transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
 }
 
 .banner-cont .swiper-pagination-bullet-active {
-  width: 60px;
-  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  background: rgba(148, 163, 184, 0.3);
   box-shadow: 0 2px 10px rgba(56, 189, 248, 0.6);
 }
 
+/* 进度条填充效果 */
+.banner-cont .swiper-pagination-bullet-active::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 0;
+  background: linear-gradient(90deg, #38BDF8 0%, #6366F1 100%);
+  border-radius: 2px;
+}
+
+/* 播放进度动画 */
+.banner-cont .swiper-pagination-bullet-active.progress-active::before {
+  animation: progressBar 5s linear forwards;
+}
+
+@keyframes progressBar {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
 /* Banner下方快速入口卡片 - 统一深色玻璃态设计 */
 .banner .banner-s {
   margin-top: -80px;