模板:跳脸/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); | ||
} | } | ||
} | } | ||
/* 默认样式,适用于宽屏设备 */ | |||
.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: 100vw !important; | |||
width: | height: 100vh !important; | ||
height: | |||
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; | |||
animation: zoomInThenHide 1.5s ease-out forwards; | animation: zoomInThenHide 1.5s ease-out forwards; | ||
z-index: 99999 !important; | z-index: 99999 !important; | ||
} | } | ||
/* | |||
媒体查询:当屏幕宽高比小于或等于 3/4 时 | |||
(例如 iPhone 12 Pro 的分辨率是 1170x2532, 宽高比约为 1/2.16, 远小于 3/4) | |||
*/ | |||
@media (max-aspect-ratio: 3/4) { | |||
.zoom-fullscreen { | |||
/* 在窄屏上,切换为容纳模式 */ | |||
background-size: contain !important; | |||
} | |||
} | |||
/* 折叠部分样式保持不变 */ | /* 折叠部分样式保持不变 */ |
2025年7月19日 (六) 18:54的版本
@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: 100vw !important;
height: 100vh !important;
background-position: center !important;
background-repeat: no-repeat !important;
/* 默认行为:覆盖全屏 */
background-size: cover !important;
animation: zoomInThenHide 1.5s ease-out forwards;
z-index: 99999 !important;
}
/*
媒体查询:当屏幕宽高比小于或等于 3/4 时
(例如 iPhone 12 Pro 的分辨率是 1170x2532, 宽高比约为 1/2.16, 远小于 3/4)
*/
@media (max-aspect-ratio: 3/4) {
.zoom-fullscreen {
/* 在窄屏上,切换为容纳模式 */
background-size: contain !important;
}
}
/* 折叠部分样式保持不变 */
.mw-collapsible.mw-collapsed .zoom-fullscreen {
visibility: hidden;
}