204 lines
3.9 KiB
Markdown
204 lines
3.9 KiB
Markdown
# 优化IPCard组件生成状态样式
|
||
|
||
## 现状分析
|
||
|
||
当前IPCard组件在图片生成过程中显示的占位符（.generating-placeholder）样式较为简单，主要包含：
|
||
|
||
* 深灰色背景（#2a2a2a）
|
||
|
||
* 基础的圆形旋转加载动画
|
||
|
||
* 静态文本"正在生成图片..."
|
||
|
||
## 优化目标
|
||
|
||
使生成状态更加灵动、美观，符合项目的设计风格（深紫色主色调），提升用户体验。
|
||
|
||
## 优化方案
|
||
|
||
### 1. 背景效果优化
|
||
|
||
* 将纯色背景改为渐变背景，与主题色呼应
|
||
|
||
* 添加微妙的呼吸动画效果
|
||
|
||
### 2. 加载动画优化
|
||
|
||
* 设计双层旋转动画，增强视觉层次感
|
||
|
||
* 使用主题色（#A78BFA）作为动画主色调
|
||
|
||
* 添加脉冲效果，使动画更加生动
|
||
|
||
### 3. 文本效果优化
|
||
|
||
* 添加渐变文字效果
|
||
|
||
* 保持与主题色的一致性
|
||
|
||
### 4. 整体布局优化
|
||
|
||
* 添加卡片阴影和立体感
|
||
|
||
* 确保动画流畅，性能优化
|
||
|
||
## 具体实现
|
||
|
||
### 修改样式代码
|
||
|
||
1. **更新.generating-placeholder样式**：
|
||
|
||
* 添加渐变背景
|
||
|
||
* 添加呼吸动画
|
||
|
||
* 优化文本样式
|
||
|
||
2. **更新.generating-spinner样式**：
|
||
|
||
* 设计双层旋转结构
|
||
|
||
* 使用主题色作为动画颜色
|
||
|
||
* 添加脉冲动画
|
||
|
||
3. **添加新的动画关键帧**：
|
||
|
||
* 双层旋转动画
|
||
|
||
* 呼吸效果动画
|
||
|
||
* 脉冲效果动画
|
||
|
||
## 预期效果
|
||
|
||
* 生成状态更加灵动、美观
|
||
|
||
* 与项目设计风格保持一致
|
||
|
||
* 提升用户等待体验
|
||
|
||
* 动画流畅，性能优化
|
||
|
||
## 实现步骤
|
||
|
||
1. 修改IPCard组件的样式部分，更新.generating-placeholder相关样式
|
||
2. 添加新的动画关键帧
|
||
3. 确保样式与主题色保持一致
|
||
4. 测试动画性能和效果
|
||
|
||
## 代码示例
|
||
|
||
```css
|
||
/* 生成状态样式优化 */
|
||
.generating-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a2e 100%);
|
||
color: white;
|
||
border-radius: inherit;
|
||
position: relative;
|
||
overflow: hidden;
|
||
animation: breathe 3s ease-in-out infinite;
|
||
}
|
||
|
||
/* 添加背景装饰效果 */
|
||
.generating-placeholder::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(167, 139, 250, 0.1) 0%, transparent 70%);
|
||
animation: rotate 20s linear infinite;
|
||
}
|
||
|
||
.generating-spinner {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 48px;
|
||
margin-bottom: 16px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.generating-spinner::before,
|
||
.generating-spinner::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
border: 3px solid transparent;
|
||
animation: spin 2s linear infinite;
|
||
}
|
||
|
||
.generating-spinner::before {
|
||
border-top-color: #A78BFA;
|
||
border-right-color: #A78BFA;
|
||
animation-duration: 1s;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
.generating-spinner::after {
|
||
border-bottom-color: #6B46C1;
|
||
border-left-color: #6B46C1;
|
||
animation-duration: 2s;
|
||
animation-timing-function: ease-in-out;
|
||
}
|
||
|
||
/* 添加脉冲效果 */
|
||
.generating-spinner::before {
|
||
box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
|
||
animation: spin 1s linear infinite, pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
.generating-text {
|
||
font-size: 14px;
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #A78BFA 0%, #6B46C1 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
font-weight: 500;
|
||
z-index: 1;
|
||
position: relative;
|
||
}
|
||
|
||
/* 新增动画关键帧 */
|
||
@keyframes breathe {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.95;
|
||
}
|
||
}
|
||
|
||
@keyframes rotate {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
box-shadow: 0 0 10px rgba(167, 139, 250, 0.3);
|
||
transform: scale(1);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 20px rgba(167, 139, 250, 0.6);
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
```
|
||
|
||
这个优化方案将使IPCard
|