苹果液态玻璃风格网页提示词 (来源：X - 歸藏)，复制注意链接·的空格
»»»»
基于下面苹果 WWDC2025发布会关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，在线引用背景图片，背景图片为：https://i. ibb. co/xtN61cRf/Comfy-UI-Output-4-1.png
## 网页具体要求为：
1. 使用Bento Grid风格的视觉设计，文字颜色为白色，高亮文字色为苹果标志性的渐变，带有玻璃质感的卡片，卡片不需要深色背景
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，Apache ECharts 5（https://cdn. jsdelivr. net/npm/[email protected]/dist/echarts.min.js）样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 字体引用 Google Font 的字体
10. 图标引用Font Awesome （https://use .fontawesome.com/releases/v5.11.2/css/all.css） ，避免使用emoji作为主要图标
11. 不要省略内容要点
## 卡片样式严格参考如下实现方式：
<div class="liquidGlass-wrapper"> <div class="liquidGlass-effect"></div> <div class="liquidGlass-tint"></div> <div class="liquidGlass-shine"></div> <div class="liquidGlass-text"> <div class="menu-item">菜单项</div> </div></div><!-- SVG滤镜 --><svg style="display: none"> <filter id="glass-distortion"> <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5"/> <feGaussianBlur stdDeviation="3" result="softMap"/> <feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G"/> </filter></svg>CSS样式：/ 容器 /.liquidGlass-wrapper { position: relative;
display: flex;
overflow: hidden; padding: 0.6rem; border-radius: 2rem; cursor: pointer; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}/ Hover效果 /.liquidGlass-wrapper:hover { padding: 0.8rem; border-radius: 2.5rem;}/ 扭曲层 /.liquidGlass-effect {
position: absolute; z-index: 0; inset: 0; backdrop-filter: blur(3px); filter: url(# glass-distortion);
}/ 色调层 /.liquidGlass-tint {
position: absolute; z-index: 1; inset: 0; background: rgba(255, 255, 255, 0.25);}/ 光泽层 /.liquidGlass-shine {
position: absolute; z-index: 2; inset: 0; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);}/ 内容层 /.liquidGlass-text {
position: relative; z-index: 3; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}
.liquidGlass-wrapper:hover .liquidGlass-text { transform: scale(0.95);}/ 子项样式 /.menu-item { padding: 0.4rem 0.6rem; border-radius: 0.8rem; transition: all 0.1s ease-in;}
.menu-item:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px);}
⚠️ 提示词使用注意事项：
如果你不想要一图流的话可以删除提示词里的“尽量在一页展示所有内容”的这部分。
这个风格必须要背景图片，没有的话辨识度就会很受影响，建议加上，建议用深色背景图。
建议优先使用 Gemini 2.5 Pro 生成，DeepSeek R1 0528 可以用，但是他无法搞定后面的图片扭曲部分。
»»»»
基于下面苹果 WWDC2025发布会关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，在线引用背景图片，背景图片为：https://i. ibb. co/xtN61cRf/Comfy-UI-Output-4-1.png
## 网页具体要求为：
1. 使用Bento Grid风格的视觉设计，文字颜色为白色，高亮文字色为苹果标志性的渐变，带有玻璃质感的卡片，卡片不需要深色背景
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，Apache ECharts 5（https://cdn. jsdelivr. net/npm/[email protected]/dist/echarts.min.js）样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 字体引用 Google Font 的字体
10. 图标引用Font Awesome （https://use .fontawesome.com/releases/v5.11.2/css/all.css） ，避免使用emoji作为主要图标
11. 不要省略内容要点
## 卡片样式严格参考如下实现方式：
<div class="liquidGlass-wrapper"> <div class="liquidGlass-effect"></div> <div class="liquidGlass-tint"></div> <div class="liquidGlass-shine"></div> <div class="liquidGlass-text"> <div class="menu-item">菜单项</div> </div></div><!-- SVG滤镜 --><svg style="display: none"> <filter id="glass-distortion"> <feTurbulence type="fractalNoise" baseFrequency="0.01 0.01" numOctaves="1" seed="5"/> <feGaussianBlur stdDeviation="3" result="softMap"/> <feDisplacementMap in="SourceGraphic" in2="softMap" scale="150" xChannelSelector="R" yChannelSelector="G"/> </filter></svg>CSS样式：/ 容器 /.liquidGlass-wrapper { position: relative;
display: flex;
overflow: hidden; padding: 0.6rem; border-radius: 2rem; cursor: pointer; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1); transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}/ Hover效果 /.liquidGlass-wrapper:hover { padding: 0.8rem; border-radius: 2.5rem;}/ 扭曲层 /.liquidGlass-effect {
position: absolute; z-index: 0; inset: 0; backdrop-filter: blur(3px); filter: url(# glass-distortion);
}/ 色调层 /.liquidGlass-tint {
position: absolute; z-index: 1; inset: 0; background: rgba(255, 255, 255, 0.25);}/ 光泽层 /.liquidGlass-shine {
position: absolute; z-index: 2; inset: 0; box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5), inset -1px -1px 1px 1px rgba(255, 255, 255, 0.5);}/ 内容层 /.liquidGlass-text {
position: relative; z-index: 3; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);}
.liquidGlass-wrapper:hover .liquidGlass-text { transform: scale(0.95);}/ 子项样式 /.menu-item { padding: 0.4rem 0.6rem; border-radius: 0.8rem; transition: all 0.1s ease-in;}
.menu-item:hover { background-color: rgba(255, 255, 255, 0.5); box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px);}
⚠️ 提示词使用注意事项：
如果你不想要一图流的话可以删除提示词里的“尽量在一页展示所有内容”的这部分。
这个风格必须要背景图片，没有的话辨识度就会很受影响，建议加上，建议用深色背景图。
建议优先使用 Gemini 2.5 Pro 生成，DeepSeek R1 0528 可以用，但是他无法搞定后面的图片扭曲部分。