极光律动 (Aurora Rhythms) 设计语言

更新: 1/16/2026 字数: 0 字 时长: 0 分钟

这套设计致力于在网页端复刻微信生态中“小而美”的极致体验，通过通透的视觉层次和富有生命力的微动效，打造“艺术品”级别的落地页。

🎨 视觉核心 Prompt (总纲)

Prompt: 作为一个拥有顶尖审美的前端架构师，请基于以下视觉规范创建一个极致精美的 [UI组件/落地页]：

1. 背景层 (Aurora Depth)：

   • 使用 linear-gradient(135deg, #e0f7e9 0%, #f0f4f8 100%) 作为底色。
   • 注入两个巨大的、模糊度 (blur) 为 80px 的半透明光斑（Aurora Blobs），颜色为 #07C160 (30%透明度) 和 #007AFF (20%透明度)。
   • 赋予光斑缓慢的、非线性的旋转与漂浮动画 (blobFloat)，模拟极光流动的深度感。
   • 页面底部固定三层基于 SVG 的动态波纹，设置不同的 opacity、高度与流动速度，营造海洋律动感。

2. 容器层 (Glassmorphism 2.0)：

   • 卡片采用超透毛玻璃效果：background: rgba(255, 255, 255, 0.4)，backdrop-filter: blur(15px)。
   • 增加 “纳米级”内发光：box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6)，模拟光线在玻璃边缘的折射。
   • 外部阴影采用扩散感强的浅绿色光晕：box-shadow: 0 15px 45px rgba(7, 193, 96, 0.1)。
   • 搭配 28px 的大圆角，去除锐利感。

3. 仪式感动效 (Micro-Interactions)：

   • 弹性进场：组件加载时，使用 transform: scale(0.95) translateY(30px) 配合 cubic-bezier(0.175, 0.885, 0.32, 1.275) 弹性曲线，呈现果冻般的弹出感。
   • 呼吸状态灯：活跃状态的点增加 ::after 伪元素扩展示动画，模拟发光呼吸感。
   • 交互态响应：列表项 Hover 时实现 5px 左右平移并微调 Emoji 的旋转角度。

---

✅ 独特交互：SVG 描边成功反馈 (Toast Prompt)

Prompt: 请实现一个具备“情感反馈”的复制成功提示（Toast）：

1. 结构：一个白色的精美卡片弹窗，圆角 16px，带深邃阴影。
2. 视觉核心：中央放置一个 SVG 勾选动画：
   • 第一步：绘制绿色空心圆圈路径 (stroke-dashoffset 动画)。
   • 第二步：内部背景瞬间填充为微信绿 (box-shadow inset)。
   • 第三步：从中心勾勒出白色勾选标记。
3. 反馈逻辑：整个弹窗出现时伴随 popIn 弹性缩放动画，文案使用加粗的微信绿，底部配以灰色二级说明。

---

🛠️ 技术关键点说明

1. SVG Stroke Animation: 通过设定 stroke-dasharray 与 stroke-dashoffset 完全相等，并将其动态变为 0，实现“沿路绘制”的效果。
2. Spring Curves: 放弃使用 ease 或 linear，改为使用 cubic-bezier(0.175, 0.885, 0.32, 1.275)，这是赋予 UI “生命力”的秘方。
3. Performance: 特殊滤镜如 blur 和 backdrop-filter 应尽量配合 will-change: transform 或 transform: translateZ(0) 来开启硬件加速，防止在 iOS 低端机型上掉帧。