个人作品集Tilt & Blur动画故障求助：卡顿与背景覆盖异常

可能原因与解决方案： #

• Live Server缓存干扰：Live Server可能缓存了旧的CSS/JS文件，修改空行触发了文件更新。强制禁用缓存：

  1. 在HTML头部添加缓存控制标签：

     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
     <meta http-equiv="Expires" content="0">
     

  2. 刷新页面时用Ctrl+Shift+R强制清除缓存，或者在VS Code设置中关闭Live Server的缓存选项（搜索Live Server: Disable Cache）。

• JS动画未做性能优化：直接在mousemove事件里操作DOM会导致频繁重绘，改用requestAnimationFrame调度动画：

  const galleryCards = document.querySelectorAll('.gallery-card');
  
  galleryCards.forEach(card => {
    let isHovering = false;
  
    card.addEventListener('mouseenter', () => isHovering = true);
    card.addEventListener('mouseleave', () => {
      isHovering = false;
      card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)';
    });
  
    card.addEventListener('mousemove', (e) => {
      if (!isHovering) return;
      requestAnimationFrame(() => {
        const rect = card.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
        const tiltX = (e.clientY - centerY) / (rect.height / 15); // 调整倾斜幅度
        const tiltY = (centerX - e.clientX) / (rect.width / 15);
  
        card.style.transform = `perspective(1000px) rotateX(${tiltX}deg) rotateY(${tiltY}deg) translateZ(10px)`;
      });
    });
  });
  

• 开启GPU硬件加速：给卡片添加CSS属性，让浏览器用GPU渲染动画，减少卡顿：

  .gallery-card {
    will-change: transform;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    /* Tailwind 可以直接用类：will-change-transform preserve-3d backface-hidden */
  }
  

• 清理冗余CSS：用浏览器DevTools的「Coverage」面板检查未使用的CSS规则，删除冗余代码，避免浏览器解析不必要的样式。

核心原因：z-index仅在**定位元素（position≠static）**上生效，且模糊层的堆叠上下文可能覆盖了卡片。解决方案： #

• 给卡片设置定位与层级：确保卡片是相对定位，且z-index高于模糊层：

  <!-- Tailwind 写法 -->
  <div class="gallery-card relative z-10 ...">
    <img src="..." alt="..." />
  </div>
  

• 将模糊层限制在画廊容器内：不要给body或全局元素加模糊，而是用容器内的伪元素或独立div作为模糊背景，确保其层级低于卡片：

  <div class="gallery-container relative">
    <!-- 模糊背景层：层级低于卡片 -->
    <div class="absolute inset-0 bg-black/50 blur-xl opacity-0 transition-opacity duration-300 z-0"></div>
    
    <!-- 图片卡片：层级更高 -->
    <div class="gallery-card relative z-10 ...">...</div>
    <div class="gallery-card relative z-10 ...">...</div>
  </div>
  

  然后通过JS控制hover时显示模糊层：

  const galleryContainer = document.querySelector('.gallery-container');
  const blurBg = galleryContainer.querySelector('.absolute.inset-0');
  const cards = galleryContainer.querySelectorAll('.gallery-card');
  
  cards.forEach(card => {
    card.addEventListener('mouseenter', () => blurBg.classList.add('opacity-70'));
    card.addEventListener('mouseleave', () => blurBg.classList.remove('opacity-70'));
  });
  

• 检查堆叠上下文冲突：如果父元素使用了transform/perspective/filter等属性，会创建新的堆叠上下文，导致子元素的z-index仅在该上下文内生效。此时需要调整模糊层的位置，确保它和卡片处于同一个堆叠上下文，或者给父容器设置合适的z-index。

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