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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 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