模板:跳脸/style.css:修订间差异
来自BinWiki
< 模板:跳脸
>OctoberSama 小无编辑摘要 |
>OctoberSama 小无编辑摘要 |
||
第1行: | 第1行: | ||
/* 动画定义保持不变 */ | |||
@keyframes zoomThenHide { | @keyframes zoomThenHide { | ||
0% { | 0% { | ||
opacity: 0; | opacity: 0; | ||
transform: | transform: scale(0.1); | ||
} | } | ||
20% { | 20% { | ||
opacity: 1; | opacity: 1; | ||
transform: | transform: scale(1); | ||
} | } | ||
86.7% { | 86.7% { | ||
opacity: 1; | opacity: 1; | ||
transform: | transform: scale(1); | ||
} | } | ||
100% { | 100% { | ||
opacity: 0; | opacity: 0; | ||
transform: | transform: scale(0); | ||
} | } | ||
} | } | ||
/* 容器样式:负责定位、尺寸、动画和裁剪 */ | |||
.zoom-fullscreen { | .zoom-fullscreen { | ||
position: fixed !important; | position: fixed !important; | ||
top: | top: 0; | ||
left: | left: 0; | ||
width: | width: 100vw; | ||
height: | height: 100vh; | ||
z-index: 99999 !important; | |||
overflow: hidden !important; /* 关键!裁剪掉图片溢出的部分 */ | |||
transform: | /* 将动画应用到容器上 */ | ||
transform-origin: center; | |||
animation: zoomThenHide 1.5s ease-out forwards; | animation: zoomThenHide 1.5s ease-out forwards; | ||
} | |||
/* 内部图片样式:负责填充容器 */ | |||
.zoom-fullscreen img { | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
transform: translate(-50%, -50%); | |||
/* --- 模拟 background-size: cover 的核心技巧 --- */ | |||
width: auto; | |||
height: auto; | |||
min-width: 100%; | |||
min-height: 100%; | |||
max-width: none; /* 覆盖掉系统可能存在的对图片宽度的限制 */ | |||
} | } | ||
/* 折叠部分样式保持不变 */ | |||
.mw-collapsible.mw-collapsed .zoom-fullscreen { | .mw-collapsible.mw-collapsed .zoom-fullscreen { | ||
visibility: hidden; | visibility: hidden; | ||
opacity: 0; | opacity: 0; | ||
} | } | ||
.mw-collapsible:not(.mw-collapsed) .zoom-fullscreen { | .mw-collapsible:not(.mw-collapsed) .zoom-fullscreen { | ||
visibility: visible; | visibility: visible; | ||
opacity: 1; | opacity: 1; | ||
} | } |
2025年7月19日 (六) 17:17的版本
/* 动画定义保持不变 */
@keyframes zoomThenHide {
0% {
opacity: 0;
transform: scale(0.1);
}
20% {
opacity: 1;
transform: scale(1);
}
86.7% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
/* 容器样式:负责定位、尺寸、动画和裁剪 */
.zoom-fullscreen {
position: fixed !important;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999 !important;
overflow: hidden !important; /* 关键!裁剪掉图片溢出的部分 */
/* 将动画应用到容器上 */
transform-origin: center;
animation: zoomThenHide 1.5s ease-out forwards;
}
/* 内部图片样式:负责填充容器 */
.zoom-fullscreen img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* --- 模拟 background-size: cover 的核心技巧 --- */
width: auto;
height: auto;
min-width: 100%;
min-height: 100%;
max-width: none; /* 覆盖掉系统可能存在的对图片宽度的限制 */
}
/* 折叠部分样式保持不变 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
opacity: 0;
}
.mw-collapsible:not(.mw-collapsed) .zoom-fullscreen {
visibility: visible;
opacity: 1;
}