模板:跳脸/style.css:修订间差异
来自BinWiki
< 模板:跳脸
>OctoberSama 小无编辑摘要 |
>OctoberSama 小无编辑摘要 |
||
第2行: | 第2行: | ||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
transform: | transform: scale(0.1); | ||
} | } | ||
20% { | 20% { | ||
opacity: 1; | opacity: 1; | ||
transform: | transform: scale(1); /* 放大到1即可,因为div本身已经全屏 */ | ||
} | } | ||
86.7% { | 86.7% { | ||
opacity: 1; | opacity: 1; | ||
transform: | transform: scale(1); | ||
} | } | ||
100% { | 100% { | ||
opacity: 0; | opacity: 0; | ||
transform: | transform: scale(0); | ||
} | } | ||
} | } | ||
第20行: | 第20行: | ||
.zoom-fullscreen { | .zoom-fullscreen { | ||
position: fixed !important; | position: fixed !important; | ||
top: | top: 0; | ||
left: | left: 0; | ||
width: | width: 100vw; /* 宽度 = 100% 视口宽度 */ | ||
height: | height: 100vh; /* 高度 = 100% 视口高度 */ | ||
/* --- 核心背景属性 --- */ | |||
background-size: cover !important; /* 关键!保持比例铺满容器 */ | |||
transform: | background-position: center !important; /* 背景图居中显示 */ | ||
background-repeat: no-repeat !important; /* 背景图不重复 */ | |||
/* 动画和层级 */ | |||
transform-origin: center; /* 确保从中心缩放 */ | |||
animation: zoomThenHide 1.5s ease-out forwards; | animation: zoomThenHide 1.5s ease-out forwards; | ||
z-index: 99999 !important; | z-index: 99999 !important; | ||
} | } | ||
/* 这部分可以保持不变 */ | |||
.mw-collapsible.mw-collapsed .zoom-fullscreen { | .mw-collapsible.mw-collapsed .zoom-fullscreen { | ||
visibility: hidden; | visibility: hidden; |
2025年7月19日 (六) 17:13的版本
@keyframes zoomThenHide {
0% {
opacity: 0;
transform: scale(0.1);
}
20% {
opacity: 1;
transform: scale(1); /* 放大到1即可,因为div本身已经全屏 */
}
86.7% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.zoom-fullscreen {
position: fixed !important;
top: 0;
left: 0;
width: 100vw; /* 宽度 = 100% 视口宽度 */
height: 100vh; /* 高度 = 100% 视口高度 */
/* --- 核心背景属性 --- */
background-size: cover !important; /* 关键!保持比例铺满容器 */
background-position: center !important; /* 背景图居中显示 */
background-repeat: no-repeat !important; /* 背景图不重复 */
/* 动画和层级 */
transform-origin: center; /* 确保从中心缩放 */
animation: zoomThenHide 1.5s ease-out forwards;
z-index: 99999 !important;
}
/* 这部分可以保持不变 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
opacity: 0;
}
.mw-collapsible:not(.mw-collapsed) .zoom-fullscreen {
visibility: visible;
opacity: 1;
}