麆鍱

1
前往R层列表

原创R层群列表

点击加入网站

加入网站

前往沙盒/测试站

沙盒/测试站

欢迎来到R-backrooms后室同人创作站！

想要测试你的页面？来这里R分沙盒/测试站
1
3
{$img3}
{$img4}
{$img5}
{$img6}
R分十月月刊
自创标签页面
{$text3}
{$text4}
{$text5}
{$text6}
/* 
    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;
}

2023R分一周年竞赛已经结束。恭喜wkwangkongwkwangkong获胜！

第一次月刊组成员选举已经结束。恭喜DeeMoo_DeeMoo_，ordinary zelenaordinary zelenaLarmut BakfisLarmut Bakfis，sanbin desanbin de成功当选月刊组成员！

2023旧日之景竞赛已结束，恭喜AEXSIAAEXSIA和starry_Milky Waystarry_Milky Way的作品荣获第一！

2023字母抢位赛已结束，恭喜starry_Milky Waystarry_Milky Way获得第一名！wkwangkongwkwangkong获得第二名！AEXSIAAEXSIA获得第三名！

R分第二次版主选举已结束，恭喜starry_Milky Waystarry_Milky Way，allcolorsallcolors，mental patientmental patient
(原baiyuleyu)，当选版主！

出于让站内文章整体质量更加优秀的缘故，我们将1~100中的部分神风文章删除。点此查看保存了的文章，你们可以在CC-BY-SA 4.0的许可下重写这些文章，但我们希望你能在有条件的情况下先征询原作者的意见。

请各位MAST和版主将本站不当行为记在这里哦！感谢你们为本站的付出

官方QQ交流群：768742148,欢迎大家前来交流讨论。

+ 想要发布新作品？
最近新增的原创页面

往事:陨落的都市
虚海
Level R 907
Level R-128
Level R-92
Level R-426
单页迭代模板生成器
Level R-89

最近新增的原创页面一览
精品原创层级

Level R-51
by AEXSIA，starry_Milky Way
“吾愿君之魂魄传花中，与我共赏城南花。”

精品原创隐秘层级

筑塔
by ciszes
“我现在终于理解了那句话的意思
幻觉往往比现实更加美好
或许那灰色的结局
才应该是对我最美好的结局”

精品原创现象

EVENT R-33
by Xx_ssc_xX
“颤栗着的恐惧。
而我此刻就要逃走。
不再回头。
我能够成为吗？
色彩缤纷而自由的吗？
深层映射。
回响着。
结束。”

精品原创故事

埃刻希娅·火光的故事
by Nwalanchel
“总会有地上的野草不愿腐烂，成为烈火在黑夜之中燃烧。
也总会有不愿跪下的人举起抗争的火炬，焚烧着那虚伪的神明。”

http://r-backrooms-wiki-cn.wikidot.com/guide
folder_open.png

指导中心有你所需要的所有资料，它能帮助你写好每一篇关于后室的文章，在里面还有很多实用工具和你需要知道的内容，有任何疑问也欢迎来这里寻找答案哦！

http://r-sandbox-cn.wikidot.com
sandbox-bucket.png

我们的沙盒站有着多种代码的模板和自由的文章查看编写权限，支持合著，单写，私密三种模式，不费力查看自己创建的页面，无需加入便可撰写文章，将你的文章稿子放在这里并给予审核员审核后即可发布自己的正式文章。



站内新闻

2023.7.9

因本站活跃版主X-traordinary因个人原因离职，结合各MAST的工作时间，将现活跃MASTqwerty-C7201qwerty-C7201、AEXSIAAEXSIA升职为版主，为他表示由衷的祝贺。

2023.4.30

2023清明碑星梦竞赛已结束，恭喜wkwangkongwkwangkong的作品，mental patientmental patient的作品分数并列第一。

2023.2.16

第二次MAST职员公开招新已结束，恭喜woshilaoliuwoshilaoliu，holaMEMZholaMEMZ，China wztChina wzt，NwalanchelNwalanchel，qwerty-C7201qwerty-C7201五位晋升Mast职员，令因本站管理人数不足，结合各前MAST升职意愿，已将wkwangkongwkwangkong，abaabaabaabaabaabaabaaba与X-traordinary升职为本站的版主，为他们表示由衷的祝贺。

2023.1.29

2023终焉亦或始端竞赛已结束，恭喜的wkwangkongwkwangkong和NwalanchelNwalanchel合著作品获得冠军！

2022.12.29

2022圣诞节竞赛已结束，恭喜wkwangkongwkwangkong获得第一名，X-traordinary，Super KSuper K,CH2817CH2817并列第二！并且Level R-500 - Level R-999已经开放，快去投稿文章吧！

>> 旧新闻归档

其他站点

int-logo.png

国际翻译中心

http://backrooms-int.wikidot.com/

cn_logo.svg

中文维基

http://backrooms-wiki-cn.wikidot.com/

logo.svg

英文维基

http://backrooms-wiki.wikidot.com/

ru-logo

俄罗斯文维基

http://ru-backrooms-wiki.wikidot.com/

fr-logo

法文维基

http://fr-backrooms-wiki.wikidot.com/

pt-br-logo

葡萄牙文维基

http://pt-br-backrooms-wiki.wikidot.com/

vn-logo

越南文维基

http://backrooms-vn.wikidot.com/

es_logo.png

西班牙文维基

http://es-backrooms-wiki.wikidot.com/

backrooms-pl-bgtr.png

波兰文维基

http://pl-backrooms-wiki.wikidot.com/

logo.svg

日文维基

http://japan-backrooms-wiki.wikidot.com/

TBID_Logo%20.png

印尼文维基

http://id-backrooms-wiki.wikidot.com/

%E6%84%8F%E5%A4%A7%E5%88%A9logo

意大利文维基

http://it-backrooms-wiki.wikidot.com/

UN-C.png

多语言孵化器

http://backrooms-uli.wikidot.com/

T--Logo.png

T层群站点（CN）

http://tbackroomst.wikidot.com/

logo.png

云室维基（CN)

http://backroom-wiki-cn.wikidot.com/

logo

Z层群站点（CN）

http://z-backrooms.wikidot.com/

ERR

R层群站点（CN）

http://r-backrooms-wiki-cn.wikidot.com/

63d5286bface21e9ef8c2397.png

HC层群站点（CN）

http://hc-backrooms-wiki-cn.wikidot.com/

Logo

世界数据库（CN）

http://backrooms-world.wikidot.com/
logo

抖音站点（CN）

http://backroomsdyfb.wikidot.com/

zch1O0.png

另世站点（CN）

http://frontherooms.wikidot.com/

6399a815b1fccdcd367f0caa.png

X层群站点（CN）

http://backrooms-x-cn.wikidot.com/

6392e342b1fccdcd36909395.png

E层群站点（CN）

http://yeebackrooms.wikidot.com/

ERR

The Backrooms-R 后室R站点Logo由lpoigd5289lpoigd5289基于EstrellaYoshteEstrellaYoshte 的设计修改而来，适用知识共享-版权归属-相同方式共享 3.0 授权协议（CC-BY-SA）。

注意！！！！该版式仅在主页和默认页面使用

R分站维基版式由dby2022dby2022制作


点击此处以查看已废弃使用的旧黄色阈限版式主页。

附加

来看看R分站的作者页吧，认识一下作者们。

写文常用 ：

代码指导

神风避坑指南（中站）

如何撰写一篇原创层级

关于

中心原创管理
页面版本: 408, 最后编辑于: 17 Nov 2023 23:55
编辑 评分 (+70) 标签 讨论 (74) 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License