style(样式): 添加图片生成相关动画效果
- 新增 shimmer 闪光动画 - 添加 progress 进度条动画 - 定义图片生成加载状态样式
This commit is contained in:
parent
de0860a5aa
commit
c5c16ee893
@ -649,3 +649,48 @@ pre[class*="language-"] {
|
|||||||
background-color: transparent;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user