2023年政策修订增补工作正在进行中，欢迎参与！
User:Leranjun/sandbox/hh-tv/styles.css
注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
- Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
- Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
- Opera：在“工具→首选项”中清除缓存
- 如果您已登录但该页面出现未登录状态，请尝试在地址栏的地址最后添加代码
?_=1来访问最新页面。 - 添加代码后的本页地址如下：
-{R|https://moegirl.icu/User:Leranjun/sandbox/hh-tv/styles.css?_=1}-
.mediaContainer {
margin: auto;
}
.hh-tv {
background: black;
position: relative;
width: 50%;
padding-top: 28.125%;
color: white;
font-size: 2.5vw !important;
margin: 0.5em auto;
overflow: hidden;
}
@media only screen and (max-width: 1115px) {
.hh-tv {
width: 100%;
padding-top: 56.25%;
font-size: 5vw !important;
}
}
.hh-tv-poster-wrapper img,
.hh-tv-bg-wrapper img,
/* .hh-tv-bg-shade, */
.hh-tv-content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
}
.hh-tv-poster-wrapper img {
transition: all 500ms;
}
.hh-tv-bg-wrapper img {
height: 125%;
left: -12.5%;
visibility: hidden;
opacity: 0;
}
/* .hh-tv-bg-shade {
background: black;
opacity: 0.5;
} */
.hh-tv-content div {
text-align: center;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
visibility: hidden;
opacity: 0;
}
.hh-tv:hover .hh-tv-content div {
animation: hh-fadein 250ms forwards, hh-fadeout 250ms forwards;
}
.hh-tv:hover .hh-tv-poster-wrapper img {
visibility: hidden;
opacity: 0;
}
.hh-tv:hover .hh-tv-bg-wrapper img {
animation: hh-fadein 1.5s forwards, hh-zoom-out 11132ms forwards linear;
}
@keyframes hh-fadein {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
@keyframes hh-fadeout {
from {
visibility: visible;
opacity: 1;
}
to {
visibility: hidden;
opacity: 0;
}
}
@keyframes hh-zoom-out {
to {
top: 0;
left: 0;
height: 100%;
}
}