refactor(UI): 移除卡片图片并添加骨架屏动画
移除多个页面中的默认卡片图片以简化UI 在评分图表区域添加骨架屏加载动画,提升用户体验
This commit is contained in:
27
styles.css
27
styles.css
@@ -128,4 +128,31 @@ body {
|
||||
.age-rating svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 骨架屏加载动画 */
|
||||
.skeleton-chart {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
background: #f0f0f0;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -468px 0 }
|
||||
100% { background-position: 468px 0 }
|
||||
}
|
||||
|
||||
.skeleton-chart::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateX(-100%);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 20%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0) 100%);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
Reference in New Issue
Block a user