主页
/*
    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群聊以方便不能访问国外网站的用户,若有兴趣者可点此链接加入。

精品原创层级

Level C-819 - “它不介意你在此”

by Amones

房間里的大象是一個英國的諺語,它以象和房間比擬某種有限空間內,存在的巨大,而無法被忽視的真相。

精品原创现象

Phenomenon C-Ø - “安慰剂”

by Yoghurt_Jinchouge

实际上,在这批实验者中随机提供了开水与杏仁水,但所取得的反馈无异。

精品原创层级

远航

by rukatyan

一个人一生之中最多进行三次远航,而进行第四次远航的勇敢者或是傻瓜们至今没有返航,一说他们在多次的远航中迷失了,亦有说法称他们已经静静栖息于深井的墓穴或是化作了死海中形代的纸船。

精品翻译层级

遗忘之森

Deip*isoster

他们并不需要你。

Yellow需要。


公告
2023 看图写话活动已经结束,详情请查看活动中心页
2023年9月 The Backrooms中文Wiki MAST选举结果已公布,结合最终票选结果及站务组意见,fljlusfljlusKoden_KylezaKoden_Kyleza因获得了大多数成员的支持而将担任本站MAST职务!详情可在此处查阅
职务续期制度仍可继续讨论,请非主管理员站务及感兴趣的成员点击此处了解相关情况。

folder_open.png
指导中心
指导中心能为你提供创作一篇你自己的“后室”文章的全部工具!
sandbox-bucket.png
CN沙盒站
你可以在CN沙盒站尽情调试你的文章和代码,当你创作完毕后,你可以在正式发布前将你文章的沙盒链接发布到草稿评判区供其他成员进行批评和建议。


cn_logo.svg

中文维基 logo 由 KcorenaKcorena 基于 EstrellaYoshteEstrellaYoshte 的设计修改而来,适用知识共享-版权归属-相同方式共享 3.0 授权协议(CC-BY-SA)。

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License