| 1 | 磨砂玻璃是 Apple 发布会的光影魔术——多色光斑在背景流转,半透明的磨砂卡片浮在上面,像一层薄雾后的彩色世界。这个风格用模糊和透明创造深度,用光和影编织高级感。每一帧都可以是一张壁纸。 |
| 2 | |
| 3 | ## 配色 |
| 4 | 标题 #0f172a 深墨、正文 #334155 石板灰,强调色 #818cf8 柔紫与 #06b6d4 青蓝是光斑的两种颜色。背景 linear-gradient(140deg, #c7d2fe 0%, #e0e7ff 45%, #cffafe 100%) 是薰衣草到浅青的三段渐变,如光斑的底色。卡片 rgba(255,255,255,0.46) 高度透明的磨砂质感,边框 rgba(255,255,255,0.55) 是半透明白色描边。 |
| 5 | |
| 6 | ## 排版 |
| 7 | 现代无衬线字体,细字重,标题轻盈地浮在磨砂卡片上。正文保持简洁,字号不过大。文字与磨砂背景的对比靠 backdrop-filter 而非纯色底。 |
| 8 | |
| 9 | ## 布局 |
| 10 | 磨砂卡片浮在多色渐变上,backdrop-filter: blur 创造深度感。卡片之间可以有重叠,增加层次。大圆角和柔和阴影保持轻盈感。 |
| 11 | |
| 12 | ## 动画 |
| 13 | blur-in、shimmer-sweep、gradient-flow |
| 14 | |
| 15 | ## 适合场景 |
| 16 | Apple 式产品发布、高端品牌展示、设计系统介绍、产品特性亮点——需要传递「高级感不需要解释」的场合。 |
| 17 | |
| 18 | ## 不要 |
| 19 | - 不要使用实色背景或硬边框 |
| 20 | - 不要丢掉磨砂模糊的核心效果 |
| 21 | - 不要让卡片变得不透明 |
| 22 | - 不要用过多的内容填满磨砂的呼吸空间 |
| 23 |