即刻App年轻人的同好社区
下载
置顶最近大家都在问的提示词（先大模型生成网页后截图）
## 吉卜力动画
基于提供的文本或者网站等关键信息，帮我用类似苹果发布会 PPT 的 Hybrid Layout 风格的视觉设计结合吉卜力动画色系生成一个中文动态网页展示，具体要求为：
1. 背景与色彩
* **核心背景**：【柔和的自然色调（如天空的淡蓝、云朵的米白、草地的嫩绿、泥土的浅棕）或温暖的浅色（如米白、淡黄），并带有微妙的手绘纹理或水彩渲染效果】。
* **文字与常规UI颜色**：与背景和谐的【深色（如深棕、墨绿、炭黑，避免纯黑的生硬感）或在较深背景上使用柔和的白色/米色】。
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
12. 默认尽量在一页内展示全部信息（允许纵向滚动显示）
13. 否则，如果明确指定PPT分页，那么才按照PPT演讲需要切分内容（也就是一页一页展示信息，且有分页指示器在底部；另外，要求可以4个方向箭头和空格翻页，其中箭头不可见）
CSS 样式严格参考如下实现方式：
```css
<style>
body {
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
background-color: #FDF6E3; /* 吉卜力米白底色 */
background-image: linear-gradient(45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%);
background-size: 20px 20px;
color: #3A2E2C; /* 主文字颜色 深棕 */
}
.font-noto-sans-sc {
font-family: 'Noto Sans SC', sans-serif;
}
.highlight-text, .highlight-stat {
color: #FFB300; /* 温暖的琥珀黄高亮 - 移除了 text-shadow */
}
.card {
background-color: rgba(255, 255, 255, 0.75); /* 半透明白色卡片 */
backdrop-filter: blur(12px);
border-radius: 1.5rem; /* 苹果风格圆角 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0,0,0,0.03);
padding: 1.5rem; /* 24px */
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
position: relative;
overflow: hidden; /* For glow effects */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08), 0 8px 15px rgba(0,0,0,0.05);
}
.card-alt-bg {
background-color: rgba(224, 242, 247, 0.75); /* 淡天蓝色半透明 */
}
.card-darker-alt-bg {
background-color: rgba(206, 229, 234, 0.8); /* 稍深一点的淡天蓝色 */
}
.tech-glow::before { /* 卡片背景光晕效果保留 */
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250%;
height: 250%;
background-image: radial-gradient(circle, rgba(255,179,0,0.15) 0%, rgba(255,179,0,0.05) 40%, transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
animation: pulseGlow 8s infinite ease-in-out;
}
.content-z {
position: relative;
z-index: 1;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.ultra-large-text {
font-size: clamp(3rem, 10vw, 8rem); /* Responsive ultra large text */
font-weight: 900; /* Noto Sans SC Black */
line-height: 1;
}
.large-stat-text {
font-size: clamp(2.5rem, 6vw, 5rem); /* For large stats like subscriber count */
font-weight: 700;
}
.list-icon {
color: #FFB300; /* Highlight color for list icons */
margin-right: 0.5rem; /* Space between icon and text */
}
</style>
```
## 吉卜力动画
基于提供的文本或者网站等关键信息，帮我用类似苹果发布会 PPT 的 Hybrid Layout 风格的视觉设计结合吉卜力动画色系生成一个中文动态网页展示，具体要求为：
1. 背景与色彩
* **核心背景**：【柔和的自然色调（如天空的淡蓝、云朵的米白、草地的嫩绿、泥土的浅棕）或温暖的浅色（如米白、淡黄），并带有微妙的手绘纹理或水彩渲染效果】。
* **文字与常规UI颜色**：与背景和谐的【深色（如深棕、墨绿、炭黑，避免纯黑的生硬感）或在较深背景上使用柔和的白色/米色】。
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
12. 默认尽量在一页内展示全部信息（允许纵向滚动显示）
13. 否则，如果明确指定PPT分页，那么才按照PPT演讲需要切分内容（也就是一页一页展示信息，且有分页指示器在底部；另外，要求可以4个方向箭头和空格翻页，其中箭头不可见）
CSS 样式严格参考如下实现方式：
```css
<style>
body {
font-family: 'Open Sans', 'Noto Sans SC', sans-serif;
background-color: #FDF6E3; /* 吉卜力米白底色 */
background-image: linear-gradient(45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(-45deg, rgba(210, 180, 140, 0.03) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%),
linear-gradient(-45deg, transparent 75%, rgba(210, 180, 140, 0.03) 75%);
background-size: 20px 20px;
color: #3A2E2C; /* 主文字颜色 深棕 */
}
.font-noto-sans-sc {
font-family: 'Noto Sans SC', sans-serif;
}
.highlight-text, .highlight-stat {
color: #FFB300; /* 温暖的琥珀黄高亮 - 移除了 text-shadow */
}
.card {
background-color: rgba(255, 255, 255, 0.75); /* 半透明白色卡片 */
backdrop-filter: blur(12px);
border-radius: 1.5rem; /* 苹果风格圆角 */
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 4px 10px rgba(0,0,0,0.03);
padding: 1.5rem; /* 24px */
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
position: relative;
overflow: hidden; /* For glow effects */
}
.card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.08), 0 8px 15px rgba(0,0,0,0.05);
}
.card-alt-bg {
background-color: rgba(224, 242, 247, 0.75); /* 淡天蓝色半透明 */
}
.card-darker-alt-bg {
background-color: rgba(206, 229, 234, 0.8); /* 稍深一点的淡天蓝色 */
}
.tech-glow::before { /* 卡片背景光晕效果保留 */
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250%;
height: 250%;
background-image: radial-gradient(circle, rgba(255,179,0,0.15) 0%, rgba(255,179,0,0.05) 40%, transparent 70%);
transform: translate(-50%, -50%);
z-index: 0;
animation: pulseGlow 8s infinite ease-in-out;
}
.content-z {
position: relative;
z-index: 1;
}
@keyframes pulseGlow {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
.ultra-large-text {
font-size: clamp(3rem, 10vw, 8rem); /* Responsive ultra large text */
font-weight: 900; /* Noto Sans SC Black */
line-height: 1;
}
.large-stat-text {
font-size: clamp(2.5rem, 6vw, 5rem); /* For large stats like subscriber count */
font-weight: 700;
}
.list-icon {
color: #FFB300; /* Highlight color for list icons */
margin-right: 0.5rem; /* Space between icon and text */
}
</style>
```
21 1612
0 00