未野 MOYE · 品牌电商首页 —— 独立开发
技术栈:原生 HTML / CSS / JavaScript、SVG Filter,零依赖单文件
用 feTurbulence + feDiffuseLighting 程序化生成面料材质,替代切图方案,省掉整条图片资源管线,任意色值可实时换色
光标跟随图版:rAF + 线性插值缓动,位移只走 transform 合成层,pointermove 全程 passive
完整降级:prefers-reduced-motion 关动效、hover: none 隐藏光标图版、键盘 Tab 同样触发交互
900 / 560px 双断点,移动端用 grid-template-areas 重排商品行
全站设计 token 化(色彩 / clamp() 流式字号 / 间距),改一处全站换肤
秋季大促 Banner —— 独立开发 |技术栈:纯 CSS3,无图片、无 JS
三层径向渐变 + 线性渐变合成主视觉,叠加噪点纹理层,零图片资源,改两个色值即换季
模糊色球 + 同心光晕环构成纵深,用不同时长与方向错开漂浮节奏,避免同步运动的机械感
100vw/100vh + clamp() 流式排版,一套代码覆盖移动端到 4K,无需媒体查询
渐变文字用 background-clip: text;按钮区分实心渐变与 backdrop-filter 毛玻璃两态