在index.html中实现全屏遮罩加载动画：HTML用户体验进阶-html教程-PHP中文网

遮罩层必须用position: fixed+top:0+left:0+width:100vw+height:100vh，禁用absolute或100%；z-index≥9999；动画仅用opacity和transform；移动端需touch-action:none+body overflow:hidden。

在index.html中实现全屏遮罩加载动画：html用户体验进阶

遮罩层必须用 fixed 定位且覆盖整个视口

很多初学者用 position: absolute 或直接设 width: 100%，结果滚动时遮罩消失、内容露出。真正可靠的写法是：position: fixed + top: 0 + left: 0 + width: 100vw + height: 100vh。注意别用 100%，它依赖父容器高度，在 body 未撑满时会失效。

常见错误现象：z-index 不生效、遮罩只盖住首屏、刷新后闪一下才出现。

确保遮罩的 z-index 高于所有业务元素（建议 ≥ 9999）
给 html, body 加 height: 100%，避免 vh 计算异常（尤其 Safari）
遮罩元素应放在最顶部，不嵌套在任何组件容器内

动画要用 CSS @keyframes + opacity + transform

用 display: none/block 切换会导致重排，动画卡顿；纯 opacity 淡入淡出又没“缩放”或“旋转”感。推荐组合：透明度变化 + scale(0.95) → scale(1)，视觉更自然。

性能关键点：只对 opacity 和 transform 做动画，这两项能走 GPU 合成，不会触发 Layout/Paint。

避免在动画中修改 width、height、margin 等触发布局的属性
加 will-change: opacity, transform 可提前提示浏览器优化（但不要滥用）
动画时长控制在 250–350ms，太短用户感知不到，太长显得卡

@keyframes loader-fade-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.loader-overlay {
  animation: loader-fade-in 0.3s ease-out forwards;
}

JS 控制显示/隐藏要防重复触发和竞态

用户快速点击按钮、接口并发请求、路由跳转频繁时，容易出现遮罩没关掉、或刚关又立刻打开。核心是：用一个状态变量锁住，且隐藏操作加防抖或 Promise 链绑定。

Pptx To Html

使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。

下载

典型错误：showLoader() 被连点三次，hideLoader() 却只调一次，导致遮罩残留。

维护一个 isLoaderActive 标志位，每次 show 前先检查
hide 操作不要直接删 DOM，而是加 class 触发退出动画，动画结束再移除节点（监听 animationend）
如果配合 fetch，应在 finally 块里 hide，而非仅在 then 或 catch 中

let isLoaderActive = false;
function showLoader() {
  if (isLoaderActive) return;
  document.body.appendChild(loaderEl);
  loaderEl.classList.add('active');
  isLoaderActive = true;
}
function hideLoader() {
  if (!isLoaderActive) return;
  loaderEl.classList.remove('active');
  loaderEl.addEventListener('animationend', () => {
    loaderEl.remove();
    isLoaderActive = false;
  }, { once: true });
}