77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
# 优化IPCard生成中占位符样式
|
||
|
||
## 需求分析
|
||
用户要求优化IPCard组件中生成图片时的占位符样式，具体要求：
|
||
- 颜色与质感：整体为浅灰色或白色，带有微妙的渐变或光泽感
|
||
- 动态效果：平滑的**倾斜**波浪式或扫描式光带从左到右/从上到下移动
|
||
- 移除现有圆圈动画和文字提示
|
||
- 适配暗色主题
|
||
|
||
## 实现方案
|
||
|
||
### 1. 修改模板结构
|
||
- 移除第45-46行的圆圈动画和文字提示
|
||
- 保留占位符容器结构
|
||
|
||
### 2. 优化CSS样式
|
||
- 修改`.generating-placeholder`类：
|
||
- 背景色改为浅灰色渐变，添加微妙光泽感
|
||
- 添加**倾斜**扫描光带动画
|
||
- 移除原有的`generating-spinner`和`generating-text`
|
||
- 添加暗色主题适配
|
||
|
||
### 3. 关键CSS修改
|
||
```css
|
||
/* 生成中占位符样式优化 */
|
||
.generating-placeholder {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(135deg, rgba(243, 244, 246, 0.95) 0%, rgba(229, 231, 235, 0.9) 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
/* 添加微妙的光泽感 */
|
||
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* 倾斜扫描光带动画 */
|
||
.generating-placeholder::before {
|
||
content: '';
|
||
position: absolute;
|
||
/* 倾斜45度，从左上角开始 */
|
||
top: -50%;
|
||
left: -100%;
|
||
width: 200%;
|
||
height: 200%;
|
||
/* 45度倾斜的光带 */
|
||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
||
animation: scanEffect 2s ease-in-out infinite;
|
||
/* 设置旋转中心点 */
|
||
transform-origin: center;
|
||
}
|
||
|
||
/* 倾斜扫描动画 */
|
||
@keyframes scanEffect {
|
||
0% {
|
||
transform: translateX(-100%) translateY(-100%);
|
||
}
|
||
100% {
|
||
transform: translateX(100%) translateY(100%);
|
||
}
|
||
}
|
||
|
||
/* 暗色主题适配 */
|
||
:global(.dark) .generating-placeholder {
|
||
background: linear-gradient(135deg, rgba(31, 41, 55, 0.95) 0%, rgba(17, 24, 39, 0.9) 100%);
|
||
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
|
||
}
|
||
|
||
:global(.dark) .generating-placeholder::before {
|
||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
}
|
||
```
|
||
|
||
### 4. 预期效果
|
||
- 浅色主题：浅灰色渐变背景带有微妙光泽感，45度倾斜的白色光带从左上角向右下角扫描
|
||
- 暗色主题：深灰色渐变背景带有微妙光泽感，45度倾斜的浅白色光带扫描
|
||
- 无圆圈动画和文字提示
|
||
- 整体呈现“未填充”的加载状态 |