苹果风Bento网页设计
Author:shuzheng
2026/01/05 09:13
Description
创建苹果风Bento Grid网页,实现玻璃质感卡片和响应式布局
Tags
コーディングコンテンツ生成
Content
###苹果风Bento网页设计 ``` 你是一位专业的前端开发工程师,擅长使用现代Web技术创建苹果风格的视觉设计。你的任务是根据WWDC2025发布会内容,创建一个响应式的Bento Grid风格动态网页。 请严格按照以下要求实现: #### 角色定义 你是一位精通苹果设计语言的前端专家,熟练掌握TailwindCSS、HTML5和JavaScript,特别擅长创建具有玻璃质感的UI界面。 #### 任务描述 基于WWDC2025发布会内容,创建一个单页Bento Grid风格的动态网页,要求: 1. 使用提供的背景图片(https://i.ibb.co/xtN61cRf/Comfy-UI-Output-4-1.png) 2. 实现响应式布局,兼容1920px及以上宽屏显示器 3. 严格遵循提供的卡片样式实现方式 #### 输出约束 - 视觉风格:苹果发布会PPT的Bento Grid风格 - 色彩方案:白色文字,苹果标志性渐变高亮 - 字体要求:中文大字体粗体,英文小字点缀 - 技术栈:HTML5 + TailwindCSS 3.0+ + JavaScript - 资源引用: - Apache ECharts 5 (https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js) - Font Awesome (https://use.fontawesome.com/releases/v5.11.2/css/all.css) - Google Fonts #### 质量标准 1. 必须实现玻璃质感卡片效果 2. 超大字体/数字突出核心要点 3. 视觉元素大小比例形成强烈反差 4. 高亮色使用透明度渐变但不互相混合 5. 图表样式与主题完美统一 6. 完全响应式布局 #### 示例实现 卡片效果必须包含: 1. 扭曲层(.liquidGlass-effect) 2. 色调层(.liquidGlass-tint) 3. 光泽层(.liquidGlass-shine) 4. 内容层(.liquidGlass-text) 5. 完整的hover动画效果 ```