style: add blur-up progressive image loading styles

This commit is contained in:
xfy 2026-06-22 17:59:30 +08:00
parent 0fc56adfcd
commit ed91590978

View File

@ -727,3 +727,43 @@
animation: none;
}
}
/* ========== Blur-up 渐进图片加载 ========== */
.blur-img {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: var(--ar);
/* 加载中灰底(占位图未加载完时) */
background: var(--color-paper-code-bg, #f5f5f5);
border-radius: 6px;
margin: 1em 0;
}
.blur-img-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* 20px 占位图放大后模糊scale 遮边缘 */
filter: blur(20px) saturate(1.2);
transform: scale(1.1);
}
.blur-img-full {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.4s ease;
z-index: 1;
}
.blur-img-full.is-loaded {
opacity: 1;
}
/* 暗色模式灰底 */
.dark .blur-img {
background: var(--color-paper-code-bg, #2a2a2a);
}