diff --git a/web/dist/shop/index.html b/web/dist/shop/index.html
index fb33bb0..2af5138 100644
--- a/web/dist/shop/index.html
+++ b/web/dist/shop/index.html
@@ -233,6 +233,21 @@ img { max-width:100%; display:block; }
.products-grid { grid-template-columns:1fr; }
.hero-content h1 { font-size:24px; }
}
+
+/* ========== 3D 动态效果 & 鼠标光影（新增）========== */
+/* 鼠标跟随光斑 */
+.cursor-glow{position:fixed;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(230,57,70,0.12) 0%,transparent 70%);pointer-events:none;z-index:150;transform:translate(-50%,-50%);transition:opacity .3s;mix-blend-mode:multiply;opacity:0;left:0;top:0}
+.cursor-glow.active{opacity:1}
+/* 3D 卡片容器与倾斜 */
+.products-grid{perspective:1000px}
+.product-card{transform-style:preserve-3d;transition:transform .15s ease-out,box-shadow .25s}
+.product-card .product-image{transform:translateZ(20px)}
+.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(255,255,255,0.25) 0%,transparent 50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:2}
+.product-card:hover::after{opacity:1}
+/* 触摸设备隐藏光斑 */
+@media (hover:none){.cursor-glow{display:none !important}}
@@ -811,6 +826,81 @@ async function init() {
}
init();
+
+// ========== 3D 动态效果 & 鼠标光影（新增）==========
+(function(){
+ var isTouch = window.matchMedia('(hover: none)').matches;
+
+ /* ----- 鼠标跟随光斑 ----- */
+ var cursorGlow = document.createElement('div');
+ cursorGlow.className = 'cursor-glow';
+ document.body.appendChild(cursorGlow);
+ if (!isTouch) {
+ var glowOn = false;
+ document.addEventListener('mousemove', function(e){
+ cursorGlow.style.left = e.clientX + 'px';
+ cursorGlow.style.top = e.clientY + 'px';
+ if (!glowOn) { cursorGlow.classList.add('active'); glowOn = true; }
+ });
+ document.addEventListener('mouseleave', function(){
+ cursorGlow.classList.remove('active'); glowOn = false;
+ });
+ }
+
+ /* ----- 产品卡片 3D 倾斜 + 表面高光 ----- */
+ if (!isTouch) {
+ var tiltRaf = null, tiltEvt = null;
+ function tiltUpdate(){
+ tiltRaf = null;
+ var e = tiltEvt;
+ if (!e) return;
+ var cards = document.querySelectorAll('.product-card');
+ for (var i = 0; i < cards.length; i++) {
+ var card = cards[i];
+ var rect = card.getBoundingClientRect();
+ if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) continue;
+ var cx = rect.left + rect.width / 2;
+ var cy = rect.top + rect.height / 2;
+ var rx = ((e.clientY - cy) / rect.height) * -8;
+ var ry = ((e.clientX - cx) / rect.width) * 8;
+ card.style.transform = 'perspective(1000px) 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) + '%');
+ }
+ }
+ document.addEventListener('mousemove', function(e){
+ tiltEvt = e;
+ if (tiltRaf === null) tiltRaf = requestAnimationFrame(tiltUpdate);
+ });
+ // 鼠标真正离开卡片时恢复（relatedTarget 仍在卡片内则保持倾斜，避免子元素间移动闪烁）
+ document.addEventListener('mouseout', function(e){
+ var t = e.target;
+ if (t && t.classList && t.classList.contains('product-card')) {
+ var r = e.relatedTarget;
+ if (r && (r === t || t.contains(r))) return;
+ t.style.transform = '';
+ }
+ });
+ }
+
+ /* ----- Hero 区域 3D 视差 ----- */
+ if (!isTouch) {
+ var heroContent = document.querySelector('.hero-content');
+ var heroRaf = null, heroEvt = null;
+ function heroUpdate(){
+ heroRaf = null;
+ var e = heroEvt;
+ if (!e || !heroContent) return;
+ var x = (e.clientX / window.innerWidth - 0.5) * 2;
+ var y = (e.clientY / window.innerHeight - 0.5) * 2;
+ heroContent.style.transform = 'translate(' + (x * 10) + 'px,' + (y * 10) + 'px)';
+ }
+ document.addEventListener('mousemove', function(e){
+ heroEvt = e;
+ if (heroRaf === null) heroRaf = requestAnimationFrame(heroUpdate);
+ });
+ }
+})();