style(样式): 添加图片生成相关动画效果

- 新增 shimmer 闪光动画
- 添加 progress 进度条动画
- 定义图片生成加载状态样式
This commit is contained in:
gaoziman 2025-12-27 15:02:34 +08:00
parent de0860a5aa
commit c5c16ee893

View File

@ -649,3 +649,48 @@ pre[class*="language-"] {
background-color: transparent;
}
}
/* ========================================
AI 图片生成加载动画
用于 Gemini 等图片生成模型
======================================== */
/* 闪光效果动画 - 从左到右的光线扫过 */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.animate-shimmer {
animation: shimmer 2s infinite;
}
/* 进度条动画 - 模拟加载进度 */
@keyframes progress {
0% {
width: 0%;
}
20% {
width: 15%;
}
40% {
width: 35%;
}
60% {
width: 55%;
}
80% {
width: 75%;
}
100% {
width: 90%;
}
}
.animate-progress {
animation: progress 8s ease-in-out infinite;
}