style(样式): 添加图片生成相关动画效果
- 新增 shimmer 闪光动画 - 添加 progress 进度条动画 - 定义图片生成加载状态样式
This commit is contained in:
parent
de0860a5aa
commit
c5c16ee893
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user