feat: 跨境电商3套模板添加3D动态光影效果

- shop: 红色经典风格 - 鼠标红色光斑+卡片8度3D倾斜+玻璃高光+Hero视差
- shop2: 暗黑霓虹风格 - 霓虹紫青光斑+卡片10度3D倾斜+霓虹高光+12个浮动粒子
- shop3: 北欧极简风格 - 柔和暖色光斑+卡片6度3D倾斜+柔和高光+入场动画

web/dist/shop2/index.html

@@ -1217,6 +1217,59 @@ body::before {
   .hero-content h1 { font-size:30px; }
   .hero-stats { flex-wrap:wrap; gap:16px; }
 }
+
+/* ========== 3D 动态效果 & 鼠标光影（新增） ========== */
+/* 鼠标霓虹光斑：固定跟随鼠标，紫青混合，screen 混合在暗色背景上发光 */
+.cursor-glow {
+  position: fixed;
+  width: 500px;
+  height: 500px;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(191,90,242,0.15) 0%, rgba(100,210,255,0.08) 40%, transparent 70%);
+  pointer-events: none;
+  z-index: 150;
+  transform: translate(-50%, -50%);
+  mix-blend-mode: screen;
+  filter: blur(20px);
+  left: 50vw;
+  top: 50vh;
+}
+
+/* 3D 卡片倾斜容器 */
+.products-grid { perspective: 1200px; }
+.product-card { transform-style: preserve-3d; transition: transform .15s ease-out, box-shadow .3s; }
+.product-card:hover { box-shadow: 0 0 30px rgba(191,90,242,0.3), 0 8px 40px rgba(0,0,0,0.5); }
+.product-card .product-image { transform: translateZ(25px); }
+.product-card .product-info { transform: translateZ(15px); }
+
+/* 卡片表面霓虹高光反射（随鼠标位置移动） */
+.product-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(191,90,242,0.2) 0%, transparent 50%);
+  opacity: 0;
+  transition: opacity .3s;
+  pointer-events: none;
+  z-index: 3;
+}
+.product-card:hover::after { opacity: 1; }
+
+/* 浮动霓虹粒子背景 */
+.neon-particle {
+  position: fixed;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 1;
+  animation: float-particle 20s infinite ease-in-out;
+}
+@keyframes float-particle {
+  0%, 100% { transform: translate(0, 0); opacity: 0.3; }
+  50% { transform: translate(30px, -50px); opacity: 0.8; }
+}
 </style>
 </head>
 <body>
@@ -1917,6 +1970,50 @@ async function init() {
 }
 
 init();
+
+// ========== 3D 动态效果 & 鼠标光影（新增） ==========
+// 鼠标霓虹光斑跟随
+const cursorGlow = document.createElement('div');
+cursorGlow.className = 'cursor-glow';
+cursorGlow.style.left = '50vw';
+cursorGlow.style.top = '50vh';
+document.body.appendChild(cursorGlow);
+document.addEventListener('mousemove', e => {
+  cursorGlow.style.left = e.clientX + 'px';
+  cursorGlow.style.top = e.clientY + 'px';
+});
+
+// 产品卡片 3D 倾斜 + 表面霓虹高光（鼠标在卡片上时倾斜，离开时恢复）
+document.addEventListener('mousemove', e => {
+  document.querySelectorAll('.product-card').forEach(card => {
+    const rect = card.getBoundingClientRect();
+    if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
+      const cx = rect.left + rect.width / 2;
+      const cy = rect.top + rect.height / 2;
+      const rx = ((e.clientY - cy) / rect.height) * -10;
+      const ry = ((e.clientX - cx) / rect.width) * 10;
+      card.style.transform = `perspective(1200px) rotateX(${rx}deg) rotateY(${ry}deg) translateY(-4px)`;
+      card.style.setProperty('--mx', ((e.clientX - rect.left) / rect.width * 100) + '%');
+      card.style.setProperty('--my', ((e.clientY - rect.top) / rect.height * 100) + '%');
+    } else if (card.style.transform) {
+      card.style.transform = '';
+    }
+  });
+});
+
+// 创建霓虹浮动粒子（12 个，紫/青/粉/绿随机分布）
+const particleColors = ['#BF5AF2', '#64D2FF', '#FF375F', '#30D158'];
+for (let i = 0; i < 12; i++) {
+  const p = document.createElement('div');
+  p.className = 'neon-particle';
+  p.style.left = Math.random() * 100 + 'vw';
+  p.style.top = Math.random() * 100 + 'vh';
+  p.style.background = particleColors[i % 4];
+  p.style.boxShadow = '0 0 8px ' + particleColors[i % 4];
+  p.style.animationDuration = (15 + Math.random() * 15) + 's';
+  p.style.animationDelay = -Math.random() * 20 + 's';
+  document.body.appendChild(p);
+}
 </script>
 </body>
 </html>