如何将自定义动画转为网站Pre-loader？

1. 页面结构搭建 #

先在HTML里添加预加载器容器和网站内容容器，把你已完成的动画代码放到预加载器内部：

<!-- 预加载器容器 -->
<div class="preloader">
  <!-- 替换成你做好的动画元素（比如SVG、CSS动画盒子等） -->
  <div class="custom-loader-animation">...</div>
</div>

<!-- 网站实际内容容器 -->
<div class="content">
  <!-- 你的所有网站内容都放在这里 -->
</div>

2. 基础样式控制 #

用CSS确保预加载器占满整个屏幕，默认显示，网站内容默认隐藏：

/* 预加载器全屏覆盖 */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff; /* 背景色根据你的动画风格调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 保证在所有内容上方 */
  transition: opacity 0.6s ease; /* 添加淡出过渡，提升体验 */
}

/* 网站内容默认隐藏 */
.content {
  display: none;
}

/* 预加载器淡出后的状态 */
.preloader.fade-out {
  opacity: 0;
  pointer-events: none; /* 防止淡出后仍拦截点击 */
}

3. 逻辑实现（4秒后切换显示） #

用JavaScript实现定时隐藏预加载器、显示网站内容的逻辑：

const preloader = document.querySelector('.preloader');
const content = document.querySelector('.content');

// 隐藏预加载器并显示内容的函数
function showContent() {
  preloader.classList.add('fade-out');
  // 等待预加载器淡出完成后显示内容，和CSS过渡时长对应
  setTimeout(() => {
    content.style.display = 'block';
  }, 600);
}

// 固定4秒后执行切换
setTimeout(showContent, 4000);

可选优化：结合页面加载完成事件 #

如果你的网站内容较多，不想让用户在页面加载完后还等预加载器，可以添加页面加载监听，哪个事件先触发就执行切换：

const preloader = document.querySelector('.preloader');
const content = document.querySelector('.content');

function showContent() {
  preloader.classList.add('fade-out');
  setTimeout(() => {
    content.style.display = 'block';
  }, 600);
}

// 设置4秒定时器
const loaderTimer = setTimeout(showContent, 4000);

// 监听页面全部资源加载完成事件
window.addEventListener('load', () => {
  clearTimeout(loaderTimer); // 清除定时器
  showContent();
});

内容的提问来源于stack exchange，提问作者Pedro Oliveira