加载滑屏

index.html

@@ -47,6 +47,20 @@
           startImageDiv.classList.add("startImageDivAnimation");
           // 注释下面这句话以禁止单击立刻跳过开场动画
           startImageBackgroundDiv.onclick = onAnimationEnd;
+          // 新增加载图片轮播逻辑
+    const slides = document.querySelectorAll('.loading-slide');
+    let currentSlide = 0;
+    
+    const slideInterval = setInterval(() => {
+        slides[currentSlide].classList.remove('active');
+        currentSlide = (currentSlide + 1) % slides.length;
+        slides[currentSlide].classList.add('active');
+    }, 3000);
+
+    // 在加载完成时清除定时器
+    window.addEventListener('load', () => {
+        clearInterval(slideInterval);
+    });
         };
         startImageLogo.onerror = function () {};
         startImageLogo.src = "logo.png";
@@ -58,6 +72,14 @@
       <img id="musicBtn" />
       <div id="startPanel">
         <div id="startTop">
+           <!-- 新增图片展示区域 -->
+    <div id='startTopGallery'>
+      <div class='loading-slide active' style="background-image: url('project/images/bg_1511.webp')"></div>
+      <div class='loading-slide' style="background-image: url('project/images/bg_1521.webp')"></div>
+      <div class='loading-slide' style="background-image: url('project/images/bg_2011.webp')"></div>
+      <div class='loading-slide' style="background-image: url('project/images/bg_2521.webp')"></div>
+      <div class='loading-slide' style="background-image: url('project/images/bg_3026.webp')"></div>
+  </div>
           <div id="startTopProgressBar">
             <div id="startTopProgress"></div>
           </div>

styles.css

@@ -583,3 +583,42 @@ p#name {
   transition: transform 1.5s ease-out;
   -webkit-transition: transform 1.5s ease-out;
 }
+/* ====== 新增加载界面样式 ====== */
+#startTopGallery {
+  position: absolute;
+  width: 85%;
+  height: 85%;
+  top: 15%;
+  left:7.5%;
+  perspective: 1000px;
+}
+
+.loading-slide {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
+  opacity: 0;
+  transform: translateX(100%) rotateY(30deg);
+  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
+  border-radius: 10px;
+  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
+}
+
+.loading-slide.active {
+  opacity: 1;
+  transform: translateX(0) rotateY(0);
+}
+
+/* #startTopProgressBar {
+  /* 修改原进度条位置 */
+  top: 70% !important; /* 向下移动进度条位置 */
+} */
+
+/* 新增进度条动画
+#startTopProgress {
+  transition: width 0.3s ease-out;
+  background: linear-gradient(90deg, #4CAF50, #8BC34A);
+  box-shadow: 0 2px 8px rgba(76,175,80,0.3);
+} */