主页
/* Backrooms CN Main Page CSS by hoah2333 & Eltrac */ #page-title { display: none; } #page-content .bannerContainer { display: grid; grid-template-areas: "welcome welcome welcome" "discord faq join"; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3%; } #page-content .bannerContainer .welcome { grid-area: welcome; background-color: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); font-style: italic; padding: 1rem; } #page-content .bannerContainer .navigator { display: -webkit-box; display: -webkit-flex; display: flex; background-color: rgb(var(--gray-monochrome)); -webkit-border-radius: 0 0 1rem 1rem; border-radius: 0 0 1rem 1rem; height: -webkit-min-content; height: -moz-min-content; height: min-content; margin: 0 0 4rem 0; -webkit-transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: margin 150ms cubic-bezier(0.4, 0, 0.2, 1); } #page-content .bannerContainer .navigator:hover, #page-content .bannerContainer .navigator:active { margin: 0 0 1rem 0; } #page-content .bannerContainer .navigator a { padding: 0.5rem 0; width: 100%; text-align: center; color: rgb(var(--white-monochrome)); font-size: 1.25rem; -webkit-transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: padding 150ms cubic-bezier(0.4, 0, 0.2, 1); font-weight: bold; } #page-content .bannerContainer .navigator a:hover, #page-content .bannerContainer .navigator a:active { text-decoration: none; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; padding: 2rem 0; } @media (max-width: 767px) { #page-content .bannerContainer .navigator { margin: 0 0 2rem 0; } #page-content .bannerContainer .navigator:hover { margin: 0; } #page-content .bannerContainer .navigator a { font-size: 1.1rem; } #page-content .bannerContainer .navigator a:hover, #page-content .bannerContainer .navigator a:active { padding: 1.5rem 0; } } #page-content .bannerContainer .discord { grid-area: discord; } #page-content .bannerContainer .faq { grid-area: faq; } #page-content .bannerContainer .join { grid-area: join; } #page-content .announceContainer { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; border: 4px solid rgb(var(--gray-monochrome)); -webkit-align-content: space-between; align-content: space-between; } #page-content .announceContainer .welcome { background-color: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); font-weight: bold; width: 100%; text-align: center; font-size: 1.5rem; padding: 0 0.75rem; } @media (max-width: 767px) { #page-content .announceContainer .welcome { font-size: 1.2rem; } } #page-content .announceContainer .announcement, #page-content .announceContainer .more { background-color: rgb(var(--pale-gray-monochrome)); width: 100%; padding: 0.75rem; border-top: 4px solid rgb(var(--gray-monochrome)); } #page-content .announceContainer .more { padding: 0; } #page-content .announceContainer .more .collapsible-block-folded, #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link { display: -webkit-box; display: -webkit-flex; display: flex; } #page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link, #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link { width: 100%; padding: 1rem 0; text-align: center; background: rgba(var(--gray-monochrome), 0.2); -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } #page-content .announceContainer .more .collapsible-block-folded a.collapsible-block-link:hover, #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link:hover { text-decoration: none; -webkit-text-decoration-color: transparent; text-decoration-color: transparent; background: rgba(var(--gray-monochrome), 0.4); } #page-content .announceContainer .more .collapsible-block-folded[style*=block], #page-content .announceContainer .more .collapsible-block-unfolded[style*=block] .collapsible-block-unfolded-link { display: -webkit-box !important; display: -webkit-flex !important; display: flex !important; } #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-unfolded-link a.collapsible-block-link { border-bottom: 4px solid rgb(var(--gray-monochrome)); } #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content { background: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); text-align: center; } #page-content .announceContainer .more .collapsible-block-unfolded .collapsible-block-content p { margin: 0; } #page-content .announceContainer .archive { background: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); text-align: right; width: 100%; } #page-content .announceContainer .archive a { padding: 0 1rem; color: rgb(var(--white-monochrome)); } #page-content .recentPages { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; row-gap: 1rem; } #page-content .recentPages .pageContainer { display: grid; grid-template-areas: "title" "page" "recently"; grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem; -webkit-flex-basis: 50%; flex-basis: 50%; } @media (max-width: 550px) { #page-content .recentPages .pageContainer { -webkit-flex-basis: 100%; flex-basis: 100%; } } #page-content .recentPages .pageContainer p { margin: 0; } #page-content .recentPages .pageContainer .title { grid-area: title; background: rgb(var(--gray-monochrome)); color: rgb(var(--white-monochrome)); font-weight: bold; padding: 0 1rem; } #page-content .recentPages .pageContainer .page { grid-area: page; border: solid rgb(var(--gray-monochrome)); border-width: 0 3px 0 4px; padding: 0.5em -webkit-calc(1rem - 4px); padding: 0.5em calc(1rem - 4px); max-height: 12rem; background-color: rgb(var(--pale-gray-monochrome)); overflow-y: hidden; } #page-content .recentPages .pageContainer .page .list-pages-box p { max-height: 12rem; overflow-y: hidden; } #page-content .recentPages .pageContainer .page .list-pages-box p br { display: none; } #page-content .recentPages .pageContainer .page .list-pages-box p a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #page-content .recentPages .pageContainer .recently { grid-area: recently; background: rgb(var(--gray-monochrome)); text-align: right; padding: 0 1rem; } #page-content .recentPages .pageContainer .recently a { color: rgb(var(--white-monochrome)); } #page-content .recentPages .featurePrize { grid-template-rows: 1.5rem minmax(auto, 7.68rem) 1.5rem; -webkit-flex-basis: 100%; flex-basis: 100%; } @media (max-width: 550px) { #page-content .recentPages .featurePrize { grid-template-rows: 1.5rem minmax(auto, 11.81rem) 1.5rem; } } #page-content .recentPages .featureLevelO .page p, #page-content .recentPages .featureTaleO .page p, #page-content .recentPages .featureLevelT .page p, #page-content .recentPages .featureTaleT .page p, #page-content .recentPages .featurePrize .page p { font-size: 0.8rem; } #page-content .recentPages .featureLevelO .page p:nth-of-type(1), #page-content .recentPages .featureTaleO .page p:nth-of-type(1), #page-content .recentPages .featureLevelT .page p:nth-of-type(1), #page-content .recentPages .featureTaleT .page p:nth-of-type(1), #page-content .recentPages .featurePrize .page p:nth-of-type(1) { font-size: 1rem; } #page-content .recentPages .featureLevelO .page p:nth-of-type(2), #page-content .recentPages .featureTaleO .page p:nth-of-type(2), #page-content .recentPages .featureLevelT .page p:nth-of-type(2), #page-content .recentPages .featureTaleT .page p:nth-of-type(2), #page-content .recentPages .featurePrize .page p:nth-of-type(2) { font-size: 0.5rem; } #page-content .toolsContainer { display: grid; color: rgb(var(--white-monochrome)); grid-gap: 0.5rem; } #page-content .toolsContainer .tools { display: grid; grid-template-areas: "image text" "link text"; grid-template-columns: 5rem auto; justify-items: center; grid-gap: 0.5rem; background-color: rgb(var(--gray-monochrome)); padding: 0.75rem; } #page-content .toolsContainer .tools:nth-of-type(even) { direction: rtl; } #page-content .toolsContainer .tools:nth-of-type(even) * { direction: ltr; } #page-content .toolsContainer .tools img { grid-area: image; } #page-content .toolsContainer .tools a { grid-area: link; color: rgb(var(--white-monochrome)); } #page-content .toolsContainer .tools .description { grid-area: text; justify-self: left; pointer-events: none; } #page-content .toolsContainer .tools br { display: none; } #page-content .international .announcement { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; position: relative; } #page-content .international .announcement img { width: 50px; -webkit-filter: drop-shadow(0 0 1px rgba(var(--gray-monochrome), 0.8)); filter: drop-shadow(0 0 1px rgba(var(--gray-monochrome), 0.8)); } #page-content .international .announcement.es img, #page-content .international .announcement.jp img { -webkit-align-self: center; align-self: center; } #page-content .international .announcement h3 { margin: 0 0 0 1rem; line-height: 50px; } #page-content .international .announcement a { font-size: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0; -webkit-transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); } #page-content .international .announcement a:hover { background-color: rgba(var(--gray-monochrome), 0.2); }/*# sourceMappingURL=https://hoah2333.github.io/Archived-works/Backrooms/start/main.css.map */
“假如你不小心在错误的地方从现实中切出，你最终将坠入后室，这里只有腐臭的潮湿地毯，令人发狂的单调黄色，荧光灯全力运作发出的永无止境的嗡鸣，还有令人深陷其中的大约六亿平方英里随机分割的空荡房间。倘若你听见有什么东西在附近徘徊，愿上帝保佑你吧，因为它一定也听见了你的声音……”
欢迎来到 The Backrooms 中文维基！
/* Carousel Component CSS Version Made by hoah2333 Inspired form Carousel Component by Croquembouche */ :root { --base-roll-time: 0.5s; --base-wait-time: 5s; --img-2-time: calc(2 * (var(--base-roll-time) + var(--base-wait-time))); --img-3-time: calc(3 * (var(--base-roll-time) + var(--base-wait-time))); --img-4-time: calc(4 * (var(--base-roll-time) + var(--base-wait-time))); --img-5-time: calc(5 * (var(--base-roll-time) + var(--base-wait-time))); --img-6-time: calc(6 * (var(--base-roll-time) + var(--base-wait-time))); --navigator-mask: url(data:image/svg+xml;base64,PHN2ZyBpZD0i5Zu+5bGCXzEiIGRhdGEtbmFtZT0i5Zu+5bGCIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzIzMTgxNTt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjxyZWN0IGNsYXNzPSJjbHMtMSIgeT0iOCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjQiLz48cmVjdCBjbGFzcz0iY2xzLTEiIHk9IjE2IiB3aWR0aD0iMjAiIGhlaWdodD0iNCIvPjwvc3ZnPg==); } .carousel-container { position: relative; overflow: hidden; } .carousel-container .rolling { display: flex; flex-direction: column; height: 100%; position: relative; overflow: hidden; } .carousel-container .rolling br { display: none; } .carousel-container .rolling a:nth-of-type(1) { width: 100%; position: relative; } .carousel-container .rolling a:nth-of-type(2), .carousel-container .rolling a:nth-of-type(3), .carousel-container .rolling a:nth-of-type(4), .carousel-container .rolling a:nth-of-type(5), .carousel-container .rolling a:nth-of-type(6) { position: absolute; left: 100%; width: 100%; } .carousel-container .progress { position: absolute; bottom: 0; background: rgba(255, 255, 255, 0.7); box-sizing: border-box; backdrop-filter: blur(2px); height: 5px; left: 0; } /* ============== */ /* 图片切换动画部分 */ /* ============== */ .carousel-container .rolling.img-2 a:nth-of-type(1) { animation: rolling2-1 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-2 a:nth-of-type(2) { animation: rolling2-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes rolling2-1 { 0% {left: 0;} /* 0s */ 4.54% {left: -100%;} /* 0.5s */ 49.99% {left: -100%;} 50% {left: 100%;} /* 5.5s */ 54.54% {left: 0;} /* 6s */ 100% {left: 0;} /* 11s */ } @keyframes rolling2-2 { 0% {left: 100%;} /* 0s */ 4.54% {left: 0;} /* 0.5s */ 50% {left: 0;} /* 5.5s */ 54.54% {left: -100%;} /* 6s */ 99.99% {left: -100%;} 100% {left: 100%;} /* 11s */ } .carousel-container .rolling.img-3 a:nth-of-type(1) { animation: rolling3-1 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-3 a:nth-of-type(2) { animation: rolling3-2 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-3 a:nth-of-type(3) { animation: rolling3-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes rolling3-1 { 0% {left: 0;} /* 0s */ 3.03% {left: -100%;} /* 0.5s */ 66.65% {left: -100%;} 66.66% {left: 100%;} /* 11s */ 69.69% {left: 0;} /* 11.5s */ 100% {left: 0;} /* 16.5s */ } @keyframes rolling3-2 { 0% {left: 100%;} /* 0s */ 3.03% {left: 0;} /* 0.5s */ 33.33% {left: 0;} /* 5.5s */ 36.36% {left: -100%;} /* 6s */ 99.99% {left: -100%;} 100% {left: 100%;} /* 16.5s */ } @keyframes rolling3-3 { 0% {left: 100%;} /* 0s */ 33.33% {left: 100%;} /* 5.5s */ 36.36% {left: 0;} /* 6s */ 66.66% {left: 0;} /* 11s */ 69.69% {left: -100%;} /* 11.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 16.5s */ } .carousel-container .rolling.img-4 a:nth-of-type(1) { animation: rolling4-1 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-4 a:nth-of-type(2) { animation: rolling4-2 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-4 a:nth-of-type(3) { animation: rolling4-3 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-4 a:nth-of-type(4) { animation: rolling4-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes rolling4-1 { 0% {left: 0;} /* 0s */ 2.27% {left: -100%;} /* 0.5s */ 74.99% {left: -100%;} 75% {left: 100%;} /* 16.5s */ 77.27% {left: 0;} /* 17s */ 100% {left: 0;} /* 22s */ } @keyframes rolling4-2 { 0% {left: 100%;} /* 0s */ 2.27% {left: 0;} /* 0.5s */ 25% {left: 0;} /* 5.5s */ 27.27% {left: -100%;} /* 6s */ 99.99% {left: -100%;} 100% {left: 100%;} /* 22s */ } @keyframes rolling4-3 { 0% {left: 100%;} /* 0s */ 25% {left: 100%;} /* 5.5s */ 27.27% {left: 0;} /* 6s */ 50% {left: 0;} /* 11s */ 52.27% {left: -100%;} /* 11.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 22s */ } @keyframes rolling4-4 { 0% {left: 100%;} /* 0s */ 50% {left: 100%;} /* 11s */ 52.27% {left: 0;} /* 11.5s */ 75% {left: 0;} /* 16.5s */ 77.27% {left: -100%;} /* 17s */ 99.99% {left: -100%} 100% {left: 100%;} /* 22s */ } .carousel-container .rolling.img-5 a:nth-of-type(1) { animation: rolling5-1 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-5 a:nth-of-type(2) { animation: rolling5-2 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-5 a:nth-of-type(3) { animation: rolling5-3 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-5 a:nth-of-type(4) { animation: rolling5-4 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-5 a:nth-of-type(5) { animation: rolling5-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes rolling5-1 { 0% {left: 0;} /* 0s */ 1.82% {left: -100%;} /* 0.5s */ 79.99% {left: -100%;} 80% {left: 100%;} /* 22s */ 81.82% {left: 0;} /* 22.5s */ 100% {left: 0;} /* 27.5s */ } @keyframes rolling5-2 { 0% {left: 100%;} /* 0s */ 1.82% {left: 0;} /* 0.5s */ 20% {left: 0;} /* 5.5s */ 21.82% {left: -100%;} /* 6s */ 99.99% {left: -100%;} 100% {left: 100%;} /* 27.5s */ } @keyframes rolling5-3 { 0% {left: 100%;} /* 0s */ 20% {left: 100%;} /* 5.5s */ 21.82% {left: 0;} /* 6s */ 40% {left: 0;} /* 11s */ 41.82% {left: -100%;} /* 11.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 27.5s */ } @keyframes rolling5-4 { 0% {left: 100%;} /* 0s */ 40% {left: 100%;} /* 11s */ 41.82% {left: 0;} /* 11.5s */ 60% {left: 0;} /* 16.5s */ 61.82% {left: -100%;} /* 17s */ 99.99% {left: -100%} 100% {left: 100%;} /* 27.5s */ } @keyframes rolling5-5 { 0% {left: 100%;} /* 0s */ 60% {left: 100%;} /* 16.5s */ 61.82% {left: 0;} /* 17s */ 80% {left: 0;} /* 22s */ 81.82% {left: -100%;} /* 22.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 27.5s */ } .carousel-container .rolling.img-6 a:nth-of-type(1) { animation: rolling6-1 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-6 a:nth-of-type(2) { animation: rolling6-2 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-6 a:nth-of-type(3) { animation: rolling6-3 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-6 a:nth-of-type(4) { animation: rolling6-4 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-6 a:nth-of-type(5) { animation: rolling6-5 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .rolling.img-6 a:nth-of-type(5) { animation: rolling6-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes rolling6-1 { 0% {left: 0;} /* 0s */ 1.51% {left: -100%;} /* 0.5s */ 79.99% {left: -100%;} 83.33% {left: 100%;} /* 27.5s */ 84.85% {left: 0;} /* 28s */ 100% {left: 0;} /* 33s */ } @keyframes rolling6-2 { 0% {left: 100%;} /* 0s */ 1.51% {left: 0;} /* 0.5s */ 16.67% {left: 0;} /* 5.5s */ 18.82% {left: -100%;} /* 6s */ 99.99% {left: -100%;} 100% {left: 100%;} /* 33s */ } @keyframes rolling6-3 { 0% {left: 100%;} /* 0s */ 16.67% {left: 100%;} /* 5.5s */ 18.82% {left: 0;} /* 6s */ 33.33% {left: 0;} /* 11s */ 34.85% {left: -100%;} /* 11.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 33s */ } @keyframes rolling6-4 { 0% {left: 100%;} /* 0s */ 33.33% {left: 100%;} /* 11s */ 34.85% {left: 0;} /* 11.5s */ 50% {left: 0;} /* 16.5s */ 51.51% {left: -100%;} /* 17s */ 99.99% {left: -100%} 100% {left: 100%;} /* 33s */ } @keyframes rolling6-5 { 0% {left: 100%;} /* 0s */ 50% {left: 100%;} /* 16.5s */ 51.51% {left: 0;} /* 17s */ 66.67% {left: 0;} /* 22s */ 68.18% {left: -100%;} /* 22.5s */ 99.99% {left: -100%} 100% {left: 100%;} /* 33s */ } @keyframes rolling6-6 { 0% {left: 100%;} /* 0s */ 66.67% {left: 100%;} /* 22s */ 68.18% {left: 0;} /* 22.5s */ 83.33% {left: 0;} /* 27.5s */ 84.85% {left: -100%;} /* 28s */ 99.99% {left: -100%} 100% {left: 100%;} /* 33s */ } /* ============ */ /* 进度条动画部分 */ /* ============ */ .carousel-container .progress.width-2, .carousel-container .progress.fake-2 { width: calc(100% / 2); } .carousel-container .progress.width-2 { animation: progress-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .progress.fake-2 { animation: fake-2 var(--img-2-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes progress-2 { 0% {left: 0;} /* 0s */ 4.54% {left: calc(100% / 2);} /* 0.5s */ 50% {left: calc(100% / 2);} /* 5.5s */ 54.54% {left: 100%;} /* 6s */ 99.99% {left: 100%;} 100% {left: 0;} /* 11s */ } @keyframes fake-2 { 0% {left: 0;} /* 0s */ 0.01% {left: calc(100% / -2);} 50% {left: calc(100% / -2);} /* 5.5s */ 54.54% {left: 0;} /* 6s */ 100% {left: 0;} /* 11s */ } .carousel-container .progress.width-3, .carousel-container .progress.fake-3 { width: calc(100% / 3); } .carousel-container .progress.width-3 { animation: progress-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .progress.fake-3 { animation: fake-3 var(--img-3-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes progress-3 { 0% {left: 0;} /* 0s */ 3.03% {left: calc(100% / 3);} /* 0.5s */ 33% {left: calc(100% / 3);} /* 5.5s */ 36.36% {left: calc(100% / 3 * 2);} /* 6s */ 66.66% {left: calc(100% / 3 * 2);} /* 11s */ 69.69% {left: 100%;} /* 11.5s */ 99.99% {left: 100%;} 100% {left: 0;} /* 16.5s */ } @keyframes fake-3 { 0% {left: 0;} /* 0s */ 0.01% {left: calc(100% / -3);} 66.66% {left: calc(100% / -3);} /* 11s */ 69.69% {left: 0;} /* 11.5s */ 100% {left: 0;} /* 16.5s */ } .carousel-container .progress.width-4, .carousel-container .progress.fake-4 { width: calc(100% / 4); } .carousel-container .progress.width-4 { animation: progress-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .progress.fake-4 { animation: fake-4 var(--img-4-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes progress-4 { 0% {left: 0;} /* 0s */ 2.27% {left: calc(100% / 4);} /* 0.5s */ 25% {left: calc(100% / 4);} /* 5.5s */ 27.27% {left: calc(100% / 4 * 2);} /* 6s */ 50% {left: calc(100% / 4 * 2);} /* 11s */ 52.27% {left: calc(100% / 4 * 3);} /* 11.5s */ 75% {left: calc(100% / 4 * 3)} /* 16.5s */ 77.27% {left: 100%;} /* 17s */ 99.99% {left: 100%;} 100% {left: 0;} /* 22s */ } @keyframes fake-4 { 0% {left: 0;} /* 0s */ 0.01% {left: calc(100% / -4);} 75% {left: calc(100% / -4);} /* 16.5s */ 77.27% {left: 0;} /* 17s */ 100% {left: 0;} /* 22s */ } .carousel-container .progress.width-5, .carousel-container .progress.fake-5 { width: calc(100% / 5); } .carousel-container .progress.width-5 { animation: progress-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .progress.fake-5 { animation: fake-5 var(--img-5-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes progress-5 { 0% {left: 0;} /* 0s */ 1.82% {left: calc(100% / 5);} /* 0.5s */ 20% {left: calc(100% / 5);} /* 5.5s */ 21.82% {left: calc(100% / 5 * 2);} /* 6s */ 40% {left: calc(100% / 5 * 2);} /* 11s */ 41.82% {left: calc(100% / 5 * 3);} /* 11.5s */ 60% {left: calc(100% / 5 * 3)} /* 16.5s */ 61.82% {left: calc(100% / 5 * 4);} /* 17s */ 80% {left: calc(100% / 5 * 4);} /* 22s */ 81.82% {left: 100%;} /* 22.5s */ 99.99% {left: 100%;} 100% {left: 0;} /* 27.5s */ } @keyframes fake-5 { 0% {left: 0;} /* 0s */ 0.01% {left: calc(100% / -5);} 80% {left: calc(100% / -5);} /* 22s */ 81.82% {left: 0;} /* 22.5s */ 100% {left: 0;} /* 27.5s */ } .carousel-container .progress.width-6, .carousel-container .progress.fake-6 { width: calc(100% / 6); } .carousel-container .progress.width-6 { animation: progress-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } .carousel-container .progress.fake-6 { animation: fake-6 var(--img-6-time) var(--base-wait-time) cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes progress-6 { 0% {left: 0;} /* 0s */ 1.51% {left: calc(100% / 6);} /* 0.5s */ 16.67% {left: calc(100% / 6);} /* 5.5s */ 18.82% {left: calc(100% / 6 * 2);} /* 6s */ 33.33% {left: calc(100% / 6 * 2);} /* 11s */ 34.85% {left: calc(100% / 6 * 3);} /* 11.5s */ 50% {left: calc(100% / 6 * 3)} /* 16.5s */ 51.51% {left: calc(100% / 6 * 4);} /* 17s */ 66.67% {left: calc(100% / 6 * 4);} /* 22s */ 68.18% {left: calc(100% / 6 * 5);} /* 22.5s */ 83.33% {left: calc(100% / 6 * 5);} /* 27.5s */ 84.85% {left: 100%;} /* 28s */ 99.99% {left: 100%;} 100% {left: 0;} /* 33s */ } @keyframes fake-6 { 0% {left: 0;} /* 0s */ 0.01% {left: calc(100% / -6);} 83.33% {left: calc(100% / -6);} /* 27.5s */ 84.85% {left: 0;} /* 28s */ 100% {left: 0;} /* 33s */ } /* ========== */ /* 导航菜单部分 */ /* ========== */ .carousel-container .navigator { position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0); transition: background-color 0.25s 0.25s cubic-bezier(0.4, 0, 0.2, 1), width 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-container .navigator.none { display: none; } .carousel-container .navigator::before { content: ""; background-color: rgba(255, 255, 255, 0.7); position: absolute; width: 100%; height: 100%; -webkit-mask-size: 40%; mask-size: 40%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: var(--navigator-mask); mask-image: var(--navigator-mask); left: 0; transition: left 0.75s 0s linear; } .carousel-container .navigator:hover { background-color: rgba(255, 255, 255, 0.8); width: 100%; height: 100%; transition-delay: 0s; } .carousel-container .navigator:hover::before { left: -999vw; } .carousel-container .navigator .navigator-links { display: grid; position: absolute; left: -999vw; width: 100%; height: 100%; transition: left 0s 0.25s linear; } .carousel-container .navigator br { display: none; } .carousel-container .navigator:hover .navigator-links { left: 0; transition-delay: 0s; } .carousel-container .navigator .navigator-links.links-2 { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); } .carousel-container .navigator .navigator-links.links-3 { grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); } .carousel-container .navigator .navigator-links.links-4 { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); } .carousel-container .navigator .navigator-links.links-5 { grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr); } .carousel-container .navigator .navigator-links.links-6 { grid-template-columns: 1fr; grid-template-rows: repeat(6, 1fr); } .carousel-container .navigator .navigator-links a { display: flex; position: relative; align-items: center; justify-content: left; box-sizing: border-box; border-left: 5px solid rgba(0, 0, 0, 0.4); padding-left: 10px; color: #3A3A3A; font-size: 1.15rem; text-decoration: none; clip-path: inset(0 0 100% 0); transition: clip-path 0.25s 0s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-container .navigator:hover .navigator-links a { clip-path: inset(0); transition-delay: 0.25s; } /* 一个 a:not(a:last-of-type) 就能解决的事 */ .carousel-container .navigator .navigator-links a:nth-of-type(1), .carousel-container .navigator .navigator-links.links-3 a:nth-of-type(2), .carousel-container .navigator .navigator-links.links-4 a:nth-of-type(2), .carousel-container .navigator .navigator-links.links-4 a:nth-of-type(3), .carousel-container .navigator .navigator-links.links-5 a:nth-of-type(2), .carousel-container .navigator .navigator-links.links-5 a:nth-of-type(3), .carousel-container .navigator .navigator-links.links-5 a:nth-of-type(4), .carousel-container .navigator .navigator-links.links-6 a:nth-of-type(2), .carousel-container .navigator .navigator-links.links-6 a:nth-of-type(3), .carousel-container .navigator .navigator-links.links-6 a:nth-of-type(4), .carousel-container .navigator .navigator-links.links-6 a:nth-of-type(5) { border-bottom: 1px solid rgba(0, 0, 0, 0.4); } .carousel-container .navigator .navigator-links a::after { content: ""; position: absolute; width: 100%; height: 100%; left: -100%; top: 0; background-color: rgba(0, 0, 0, 0.2); transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .carousel-container .navigator .navigator-links a:hover::after { left: 0; } .carousel-container .progress, .carousel-container .fake-1 + .navigator { display: none; } /* ======== */ /* 移动端优化 */ /* ======== */ @media (max-width: 1024px) { .carousel-container .navigator .navigator-links a { font-size: 1rem; } } @media (max-width: 980px) { .carousel-container .navigator .navigator-links a { font-size: 0.75rem; } } @media (max-width: 526px) { .carousel-container .navigator .navigator-links.links-4 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, 1fr); } .carousel-container .navigator .navigator-links.links-5, .carousel-container .navigator .navigator-links.links-6 { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); } .carousel-container .navigator .navigator-links.links-5 a:nth-of-type(5) { grid-column: 1 / 3; } } /* ======== */ /* 防呆不防傻 */ /* ======== */ .carousel-container [class*="$number"], .carousel-container .rolling a[href*="$link"], .carousel-container .navigator .navigator-links a[style*="$link"] { display: none; }
站务组正在试建全新的kook群聊以方便不能访问国外网站的用户，若有兴趣者可点此链接加入。
最近新增的翻译页面
最近新增的原创页面
精品原创层级
by rukatyan
一个人一生之中最多进行三次远航，而进行第四次远航的勇敢者或是傻瓜们至今没有返航，一说他们在多次的远航中迷失了，亦有说法称他们已经静静栖息于深井的墓穴或是化作了死海中形代的纸船。
公告
2023 看图写话活动已经结束，详情请查看活动中心页。
2023年9月 The Backrooms中文Wiki MAST选举结果已公布，结合最终票选结果及站务组意见，
fljlus， 
Koden_Kyleza因获得了大多数成员的支持而将担任本站MAST职务！详情可在此处查阅。
职务续期制度仍可继续讨论，请非主管理员站务及感兴趣的成员点击此处了解相关情况。
国际站点
中文维基 logo 由 Kcorena 基于
EstrellaYoshte 的设计修改而来，适用知识共享-版权归属-相同方式共享 3.0 授权协议（CC-BY-SA）。