如何用HTML和CSS终止加载动画并切换到另一幻灯片

数据老陈

2026-8-21

问题

如何使用HTML和CSS实现终止当前加载动画，并切换到另一幻灯片的功能？以下是当前已实现的加载动画代码：

现有CSS代码

@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans);
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 9999;
}
.loading-img-img {
    top: 15%;
    position: relative;
}   
.loading-img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  width: 100%;
  height: 100px;
  line-height: 100px;
}
.loading-img span {
  display: inline-block;
  margin: 0 5px;
  font-family: "Quattrocento Sans", sans-serif;
  font-size: 30px;
}
.loading-img span:nth-child(1) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0s infinite linear alternate;
          animation: blur-img 1.5s 0s infinite linear alternate;
}
.loading-img span:nth-child(2) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.2s infinite linear alternate;
          animation: blur-img 1.5s 0.2s infinite linear alternate;
}
.loading-img span:nth-child(3) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.4s infinite linear alternate;
          animation: blur-img 1.5s 0.4s infinite linear alternate;
}
.loading-img span:nth-child(4) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.6s infinite linear alternate;
          animation: blur-img 1.5s 0.6s infinite linear alternate;
}
.loading-img span:nth-child(5) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 0.8s infinite linear alternate;
          animation: blur-img 1.5s 0.8s infinite linear alternate;
}
.loading-img span:nth-child(6) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 1s infinite linear alternate;
          animation: blur-img 1.5s 1s infinite linear alternate;
}
.loading-img span:nth-child(7) {
  filter: blur(0px);
  -webkit-animation: blur-img 1.5s 1.2s infinite linear alternate;
          animation: blur-img 1.5s 1.2s infinite linear alternate;
}
.loading-img span:nth-child(8) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.4s infinite linear alternate;
            animation: blur-img 1.5s 1.4s infinite linear alternate;
  }
  .loading-img span:nth-child(9) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.6s infinite linear alternate;
            animation: blur-img 1.5s 1.6s infinite linear alternate;
  }
  .loading-img span:nth-child(10) {
    filter: blur(0px);
    -webkit-animation: blur-img 1.5s 1.8s infinite linear alternate;
            animation: blur-img 1.5s 1.8s infinite linear alternate;
  }
@-webkit-keyframes blur-img {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

@keyframes blur-img {
  0% {
    filter: blur(0px);
  }
  100% {
    filter: blur(4px);
  }
}

现有HTML代码

<div class="loading">
        <div class="loading-img">
          <span class="loading-img-img">
              <img src="images/logo.png" height="50px" width="50px">
          </span>
          <span class="loading-text-words">G</span>
          <span class="loading-text-words">R</span>
          <span class="loading-text-words">A</span>
          <span class="loading-text-words">V</span>
          <span class="loading-text-words">G</span>
          <span class="loading-text-words">I</span>
          <span class="loading-text-words">F</span>
          <span class="loading-text-words">T</span>
        </div>
      </div>

解决方案

要实现终止加载动画并切换到幻灯片，我们可以通过CSS类控制动画与元素显示状态，结合JavaScript触发切换（纯CSS可实现定时切换，但JS更灵活）。以下是具体实现：

1. 添加幻灯片结构

在HTML中加入幻灯片容器，默认设置为隐藏：

<!-- 原有加载动画 -->
<div class="loading">
  <div class="loading-img">
    <span class="loading-img-img">
        <img src="images/logo.png" height="50px" width="50px">
    </span>
    <span class="loading-text-words">G</span>
    <span class="loading-text-words">R</span>
    <span class="loading-text-words">A</span>
    <span class="loading-text-words">V</span>
    <span class="loading-text-words">G</span>
    <span class="loading-text-words">I</span>
    <span class="loading-text-words">F</span>
    <span class="loading-text-words">T</span>
  </div>
</div>

<!-- 新增幻灯片容器 -->
<div class="slide-container">
  <div class="slide">这是第一页幻灯片内容</div>
</div>

2. 扩展CSS样式

添加幻灯片基础样式，以及控制加载动画停止、隐藏的类：

/* 原有加载动画CSS保持不变，新增以下内容 */

/* 幻灯片容器默认隐藏 */
.slide-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: #f0f0f0;
}

/* 停止加载动画的类 */
.loading.stop-animation .loading-text-words {
  animation: none !important;
  -webkit-animation: none !important;
  filter: blur(0) !important;
}

/* 平滑隐藏加载动画的类 */
.loading.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* 显示幻灯片的类 */
.slide-container.active {
  display: flex;
}

3. 实现切换逻辑

提供两种触发切换的方式，可按需选择：

方式一：定时自动切换

如果需要加载动画显示一段时间后自动切换，添加以下JS代码：

// 3秒后触发切换（可自定义时长）
setTimeout(() => {
  const loadingElement = document.querySelector('.loading');
  const slideContainer = document.querySelector('.slide-container');
  
  // 先停止动画
  loadingElement.classList.add('stop-animation');
  
  // 延迟0.5秒后隐藏加载动画并显示幻灯片
  setTimeout(() => {
    loadingElement.classList.add('hidden');
    slideContainer.classList.add('active');
  }, 500);
}, 3000);

方式二：手动触发切换（比如按钮点击）

添加触发按钮，并绑定点击事件：

<!-- 在加载动画内添加按钮 -->
<button class="trigger-switch">跳过加载，进入幻灯片</button>

/* 按钮样式 */
.trigger-switch {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

// 绑定点击事件
document.querySelector('.trigger-switch').addEventListener('click', () => {
  const loadingElement = document.querySelector('.loading');
  const slideContainer = document.querySelector('.slide-container');
  
  loadingElement.classList.add('stop-animation');
  setTimeout(() => {
    loadingElement.classList.add('hidden');
    slideContainer.classList.add('active');
  }, 500);
});

核心原理

通过stop-animation类强制移除加载文字的模糊动画，让动画立即终止
通过hidden类结合CSS过渡效果，让加载动画平滑消失
给幻灯片容器添加active类，切换其显示状态，完成页面切换

内容的提问来源于stack exchange，提问作者Nejra Coric

如何用HTML和CSS终止加载动画并切换到另一幻灯片

现有CSS代码 #

现有HTML代码 #

1. 添加幻灯片结构 #

2. 扩展CSS样式 #

3. 实现切换逻辑 #

方式一：定时自动切换 #

方式二：手动触发切换（比如按钮点击） #

核心原理 #