style.css:修订间差异
模板页面
更多操作
![]() OctoberSama(留言 | 贡献) 小 |
![]() OctoberSama(留言 | 贡献) 小 |
||
第5行: | 第5行: | ||
width: 1px; | width: 1px; | ||
height: 1px; | height: 1px; | ||
background-color: black; | |||
opacity: 0; | opacity: 0; | ||
transition: | transform-origin: top left; | ||
transform: scale(0); | |||
transition: transform 0.3s ease-out, opacity 0.3s ease-out, width 0s 0.3s, height 0s 0.3s; | |||
z-index: 9999; | z-index: 9999; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
/* | /* 显示时:直接铺满全屏,放大到1倍 */ | ||
.fullscreen-image.show { | .fullscreen-image.show { | ||
width: 100vw; | width: 100vw; | ||
height: 100vh; | height: 100vh; | ||
opacity: 1; | |||
transform: scale(1); | transform: scale(1); | ||
opacity | transition: transform 0.3s ease-out, opacity 0.3s ease-out, width 0s, height 0s; | ||
} | } | ||
.fullscreen-image img { | .fullscreen-image img { | ||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
} | } |
2025年5月18日 (日) 14:39的版本
.fullscreen-image {
position: fixed;
top: 0;
left: 0;
width: 1px;
height: 1px;
background-color: black;
opacity: 0;
transform-origin: top left;
transform: scale(0);
transition: transform 0.3s ease-out, opacity 0.3s ease-out, width 0s 0.3s, height 0s 0.3s;
z-index: 9999;
overflow: hidden;
}
/* 显示时:直接铺满全屏,放大到1倍 */
.fullscreen-image.show {
width: 100vw;
height: 100vh;
opacity: 1;
transform: scale(1);
transition: transform 0.3s ease-out, opacity 0.3s ease-out, width 0s, height 0s;
}
.fullscreen-image img {
width: 100%;
height: 100%;
object-fit: cover;
}