模板:跳脸/style.css:修订间差异
来自BinWiki
< 模板:跳脸
>OctoberSama 小无编辑摘要 |
>OctoberSama 小无编辑摘要 |
||
第2行: | 第2行: | ||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
transform: translate(-50%, -50%) scale(0.01); | |||
transform: translate(-50%, -50%) scale(0.01); | |||
} | } | ||
20% { | 20% { | ||
opacity: 1; | opacity: 1; | ||
transform: translate(-50%, -50%) scale(1); | transform: translate(-50%, -50%) scale(1); | ||
} | } | ||
第16行: | 第14行: | ||
100% { | 100% { | ||
opacity: 0; | opacity: 0; | ||
transform: translate(-50%, -50%) scale(0); | transform: translate(-50%, -50%) scale(0); | ||
} | } | ||
第22行: | 第19行: | ||
.zoom-fullscreen { | .zoom-fullscreen { | ||
/* | /* 定位、尺寸、动画等基础属性保持不变 */ | ||
position: fixed !important; | position: fixed !important; | ||
top: 50% !important; | top: 50% !important; | ||
left: 50% !important; | left: 50% !important; | ||
transform: translate(-50%, -50%); | transform: translate(-50%, -50%); | ||
width: 100vmax !important; | width: 100vmax !important; | ||
height: 100vmax !important; | height: 100vmax !important; | ||
background-position: center !important; | background-position: center !important; | ||
background-repeat: no-repeat !important; | background-repeat: no-repeat !important; | ||
animation: zoomInThenHide 1.5s ease-out forwards; | animation: zoomInThenHide 1.5s ease-out forwards; | ||
z-index: 99999 !important; | z-index: 99999 !important; | ||
/* --- 默认行为 (针对竖屏/方屏) --- */ | |||
background-size: cover !important; | |||
} | |||
/* | |||
--- 条件性覆盖 (针对横屏) --- | |||
当视口的宽高比大于 4/3 时,此规则生效 | |||
*/ | |||
@media (min-aspect-ratio: 4/3) { | |||
.zoom-fullscreen { | |||
/* | |||
让背景图的高度等于视口高度,宽度自动等比缩放 | |||
这会精确地让图片高度占满屏幕 | |||
*/ | |||
background-size: auto 100vh !important; | |||
} | |||
} | } | ||
2025年7月19日 (六) 18:58的版本
@keyframes zoomInThenHide {
0% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.01);
}
20% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
86.7% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
}
.zoom-fullscreen {
/* 定位、尺寸、动画等基础属性保持不变 */
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
width: 100vmax !important;
height: 100vmax !important;
background-position: center !important;
background-repeat: no-repeat !important;
animation: zoomInThenHide 1.5s ease-out forwards;
z-index: 99999 !important;
/* --- 默认行为 (针对竖屏/方屏) --- */
background-size: cover !important;
}
/*
--- 条件性覆盖 (针对横屏) ---
当视口的宽高比大于 4/3 时,此规则生效
*/
@media (min-aspect-ratio: 4/3) {
.zoom-fullscreen {
/*
让背景图的高度等于视口高度,宽度自动等比缩放
这会精确地让图片高度占满屏幕
*/
background-size: auto 100vh !important;
}
}
/* 折叠部分样式保持不变 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
}