/* ===================================================================== wx-motion.css — WExAct 首页动效样式层 配套 wx-motion.js 使用。把这个文件接进已复刻好的首页即可。 依赖两个设计令牌：--accent（品牌蓝 #0672B5）和 --ease-out。 如果你的站点还没定义它们，下面这段 :root 兜底会生效； 已定义则会沿用你站点的值，无需改动。 ===================================================================== */ :root { --accent: #0672B5; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* 1 — 进场显现：进入视口时上移 + 淡入 ------------------------------- */ /* 仅当 上有 .wx-motion-ready 时才隐藏元素， 这样 JS 关闭时内容不会消失（渐进增强）。 */ .wx-motion-ready [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);will-change:opacity,transform} .wx-motion-ready [data-reveal].is-visible{opacity:1;transform:none} /* 2 — Hero 强调词下划线扫出 ----------------------------------------- */ .wx-underline-sweep{position:relative;display:inline-block} .wx-underline-sweep::after{content:"";position:absolute;left:0;right:0;bottom:0.02em;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .85s var(--ease-out) .4s} .wx-motion-ready [data-reveal].is-visible .wx-underline-sweep::after{transform:scaleX(1)} /* 3 — 卡片 hover：顶部蓝线从左画入（不做上浮） --------------------- */ .wx-card-hover{position:relative} .wx-card-hover::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .34s var(--ease-out);z-index:1} .wx-card-hover:hover::before{transform:scaleX(1)} /* 4 — 按钮：箭头右滑 + 主按钮光泽扫过 ------------------------------ */ .wx-btn .wx-arrow{display:inline-block;transition:transform .24s var(--ease-out)} .wx-btn:hover .wx-arrow{transform:translateX(5px)} .wx-btn-sheen{position:relative;overflow:hidden} .wx-btn-sheen::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.30),transparent);transform:skewX(-18deg);pointer-events:none} .wx-btn-sheen:hover::after{left:130%;transition:left .75s var(--ease-out)} /* 减弱动效偏好：全部降级为静态终态 -------------------------------- */ @media (prefers-reduced-motion: reduce){ .wx-motion-ready [data-reveal]{opacity:1!important;transform:none!important;transition:none!important} .wx-underline-sweep::after{transition:none!important;transform:scaleX(1)!important} .wx-btn-sheen::after{display:none} }