style: add blur-up progressive image loading styles
This commit is contained in:
parent
0fc56adfcd
commit
ed91590978
40
input.css
40
input.css
@ -727,3 +727,43 @@
|
|||||||
animation: none;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user