suoyousheng
/
deotalandAi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
deotalandAi/.trae/documents/优化IPCard组件生成状态样式.md

3.9 KiB
Raw Blame History

优化IPCard组件生成状态样式

现状分析

当前IPCard组件在图片生成过程中显示的占位符（.generating-placeholder）样式较为简单，主要包含：

  • 深灰色背景（#2a2a2a）

  • 基础的圆形旋转加载动画

  • 静态文本"正在生成图片..."

优化目标

使生成状态更加灵动、美观，符合项目的设计风格（深紫色主色调），提升用户体验。

优化方案

1. 背景效果优化

  • 将纯色背景改为渐变背景，与主题色呼应

  • 添加微妙的呼吸动画效果

2. 加载动画优化

  • 设计双层旋转动画，增强视觉层次感

  • 使用主题色（#A78BFA）作为动画主色调

  • 添加脉冲效果，使动画更加生动

3. 文本效果优化

  • 添加渐变文字效果

  • 保持与主题色的一致性

4. 整体布局优化

  • 添加卡片阴影和立体感

  • 确保动画流畅，性能优化

具体实现

修改样式代码

  1. 更新.generating-placeholder样式：

    • 添加渐变背景

    • 添加呼吸动画

    • 优化文本样式

  2. 更新.generating-spinner样式：

    • 设计双层旋转结构

    • 使用主题色作为动画颜色

    • 添加脉冲动画

  3. 添加新的动画关键帧：

    • 双层旋转动画

    • 呼吸效果动画

    • 脉冲效果动画

预期效果

  • 生成状态更加灵动、美观

  • 与项目设计风格保持一致

  • 提升用户等待体验

  • 动画流畅，性能优化

实现步骤

  1. 修改IPCard组件的样式部分，更新.generating-placeholder相关样式
  2. 添加新的动画关键帧
  3. 确保样式与主题色保持一致
  4. 测试动画性能和效果

代码示例

/* 生成状态样式优化 */
.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