模板:跳脸/style.css:修订间差异
来自BinWiki
< 模板:跳脸
>OctoberSama 小无编辑摘要 |
>OctoberSama 小无编辑摘要 |
||
第1行: | 第1行: | ||
@keyframes zoomInThenHide { | |||
@keyframes | |||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
transform: scale(0. | /* 从一个极小的点开始,并保持居中 */ | ||
transform: translate(-50%, -50%) scale(0.01); | |||
} | } | ||
20% { | 20% { | ||
opacity: 1; | opacity: 1; | ||
transform: scale(1); | /* 放大到最终尺寸,填满屏幕 */ | ||
transform: translate(-50%, -50%) scale(1); | |||
} | } | ||
86.7% { | 86.7% { | ||
opacity: 1; | opacity: 1; | ||
transform: scale(1); | transform: translate(-50%, -50%) scale(1); | ||
} | } | ||
100% { | 100% { | ||
opacity: 0; | opacity: 0; | ||
transform: scale(0); | /* 缩小到消失 */ | ||
transform: translate(-50%, -50%) scale(0); | |||
} | } | ||
} | } | ||
.zoom-fullscreen { | .zoom-fullscreen { | ||
/* 1. 定位和初始变换 */ | |||
position: fixed !important; | position: fixed !important; | ||
top: | top: 50% !important; | ||
left: | 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 { | .mw-collapsible.mw-collapsed .zoom-fullscreen { | ||
visibility: hidden; | visibility: hidden; | ||
} | } |
2025年7月19日 (六) 18:35的版本
@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;
}