模板:跳脸/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); | ||
} | } | ||
第14行: | 第16行: | ||
100% { | 100% { | ||
opacity: 0; | opacity: 0; | ||
/* 缩小到消失 */ | |||
transform: translate(-50%, -50%) scale(0); | transform: translate(-50%, -50%) scale(0); | ||
} | } | ||
} | } | ||
.zoom-fullscreen { | .zoom-fullscreen { | ||
/* 1. 定位和初始变换 */ | |||
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%); /* 确保容器的中心在屏幕中心 */ | ||
/* | /* 2. 尺寸定义:让容器足够大,能够覆盖任何屏幕 */ | ||
width: | /* 使用vmax单位,取视口宽度和高度中的较大值 */ | ||
height: | width: 100vmax !important; | ||
height: 100vmax !important; | |||
/* 3. 背景图设置 (核心) */ | |||
background-position: center !important; | background-position: center !important; | ||
background-repeat: no-repeat !important; | background-repeat: no-repeat !important; | ||
background-size: cover !important; /* 关键!保持比例,完全覆盖容器 */ | |||
background-size: cover !important; | |||
/* 4. 动画和层级 */ | |||
animation: zoomInThenHide 1.5s ease-out forwards; | animation: zoomInThenHide 1.5s ease-out forwards; | ||
z-index: 99999 !important; | z-index: 99999 !important; | ||
} | } | ||
/* 折叠部分样式保持不变 */ | /* 折叠部分样式保持不变 */ |
2025年7月19日 (六) 18:55的版本
@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 {
/* 1. 定位和初始变换 */
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%); /* 确保容器的中心在屏幕中心 */
/* 2. 尺寸定义:让容器足够大,能够覆盖任何屏幕 */
/* 使用vmax单位,取视口宽度和高度中的较大值 */
width: 100vmax !important;
height: 100vmax !important;
/* 3. 背景图设置 (核心) */
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important; /* 关键!保持比例,完全覆盖容器 */
/* 4. 动画和层级 */
animation: zoomInThenHide 1.5s ease-out forwards;
z-index: 99999 !important;
}
/* 折叠部分样式保持不变 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
}