思绪如雨落下
:root { --lh-red: #c0392b; --lh-blue: #2980b9; --lh-green: #27ae60; --lh-dark-green: #16a085; --lh-purple: #8e44ad; --lh-orange: #e67e22; --lh-yellow: #f1c40f; --lh-paper-bg: 255, 251, 240; --lh-string-color: 192, 57, 43; --lh-book-color: var(--gray-monochrome); --lh-tape-color: 90,90,90,0.3; --lh-white-bg: 249,249,249; --lh-dark-bg: 50, 50, 50; --lh-highlighter: var(--bright-accent); --lh-border-color: var(--gray-monochrome); --lh-wiki-note-color: var(--bright-accent) } /** * 旧代码合集 * 为了向下兼容而保留 */ .grid-container{display:flex;flex-direction:row;flex-wrap:wrap;width:100%}.grid-container,.grid-container [class*=grid]{box-sizing:border-box}[class*=grid]{padding:5px}.grid{width:100%}.grid-large{width:75%}.grid-big{width:50%}.grid-medium{width:33.33%}.grid-small{width:25%}@media screen and (min-width:768px){.wd-grid-large{width:75%}.wd-grid,.wd-grid-big{width:50%}.wd-grid-medium{width:33.33%}.wd-grid-small{width:25%}}.text-hover-hide{opacity:0;transition:opacity .3s}.text-hover-hide:hover{opacity:1}.text-block-hide{background:rgb(var(--black-monochrome));color:rgb(var(--black-monochrome));transition:background .3s}.text-block-hide:hover{background:0 0}.text-blur-hide,.text-blur-hover-hide{filter:blur(.3rem);-webkit-filter:blur(.3rem) transition: blur .3s}.text-blur-hover-hide:hover{filter:blur(0);-webkit-filter:blur(0)}.lyric-box{text-align:center;font-size:1.05rem;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center}.lyric-box p{margin:1.5em auto}.lyric-box.with-bigger-line p{margin:3em auto} /** * 便签纸 * notepaper */ .notepaper { background: linear-gradient(rgb(var(--lh-paper-bg)) 95%, #ddd 0); line-height: 2em; background-size: 100% 2em; background-attachment: local; border: 2em solid rgb(var(--lh-paper-bg)); box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.2); padding: 0; margin: 1em auto; box-sizing: border-box; position: relative } .notepaper p { margin: 0; font-size: 1.05rem; letter-spacing: 0.1rem; line-height: inherit } .notepaper.narrow, .notepaper.wide { width: 90% } @media screen and (min-width:768px){ .notepaper.narrow { width: 50% } .notepaper.wide { width: 75% } } .notepaper.tight { border-width: 1rem; border-left-width: 1.2rem; border-right-width: 1.2rem; line-height: 1.8em; background-size: 100% 1.8em; font-size: 13px } .notepaper.with-string::before { content: ''; width: 0.5em; height: 6rem; background: rgb(var(--lh-string-color)); top: -2rem; right: -1rem; display: block; position: absolute; box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2); clip-path: polygon(-100% -100%,100% 0%,100% 100%,50% 98%,0% 100%); } .notepaper.with-tape::before { content: ''; border: 1px solid #ddd; background: rgba(var(--lh-tape-color)); width: 1.5em; height: 4em; transform: rotate(45deg); display: block; position: absolute; top: -3em; left: -1.8em } .notepaper.tight.with-string::before { top: -1rem; right: -0.25rem; } .notepaper.tight.with-tape::before { top: -2.5em; left: -1.3em } .notepaper.page { min-height: 36em; counter-increment: page; display: flex; flex-direction: column; justify-content: space-between } @media screen and (min-width:768px){ .notepaper.page { width: 70% } } .notepaper.page:after { content: counter(page); display: block; text-align: center } .notepaper-group { counter-reset: page; } .book-pattern { display: flex; flex-wrap: wrap; flex-direction: row } .book-pattern .notepaper.page:not(.notepaper > .notepaper) { width: 100% } @media screen and (min-width: 768px) { .book-pattern .notepaper.page:not(.notepaper > .notepaper) { width: 50% } } .book-wrapper { background: rgb(var(--lh-book-color)); padding: 0.5rem; box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.2); border-radius: 5px; margin: 1rem auto } @media screen and (min-width: 768px) { .book-wrapper .notepaper { margin: 0 } } /** * 文字修饰 */ .text-highlighted { position: relative } .text-highlighted::before { content: ""; position: absolute; height: 0.9em; bottom: 2px; left: -2px; width: 105%; z-index: -1; background-color: rgb(var(--lh-highlighter)); opacity: .6; transform: skew(-15deg); transition: opacity .2s ease; border-radius: 3px 8px 10px 6px; transition: 0.1s ease background-color; } .text-underlined { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; text-decoration-color: rgb(var(--lh-highlighter)) } .text-wavy { text-decoration: underline wavy; text-underline-offset: 4px; text-decoration-color: rgb(var(--lh-highlighter)) } .text-circled, .text-squared { display: inline-block; border: 2px solid rgb(var(--lh-highlighter)); border-radius: 100%; box-sizing: border-box } .text-squared { border-radius: 0 } .text-shadow { text-shadow: 0.075em 0.075em 0 rgb(var(--lh-highlighter)) } .text-highlighted.td-red::before { background: var(--lh-red) } .text-circled.td-red, .text-squared.td-red { border-color: var(--lh-red) } .text-underlined.td-red, .text-wavy.td-red { text-decoration-color: var(--lh-red) } .text-highlighted.td-blue::before { background: var(--lh-blue) } .text-circled.td-blue, .text-squared.td-blue { border-color: var(--lh-blue) } .text-underlined.td-blue, .text-wavy.td-blue { text-decoration-color: var(--lh-blue) } .text-highlighted.td-green::before { background: var(--lh-green) } .text-circled.td-green, .text-squared.td-green { border-color: var(--lh-green) } .text-underlined.td-green, .text-wavy.td-green { text-decoration-color: var(--lh-green) } .text-highlighted.td-darkgreen::before { background: var(--lh-dark-green) } .text-circled.td-darkgreen, .text-squared.td-darkgreen { border-color: var(--lh-dark-green) } .text-underlined.td-darkgreen, .text-wavy.td-darkgreen { text-decoration-color: var(--lh-dark-green) } .text-highlighted.td-purple::before { background: var(--lh-purple) } .text-circled.td-purple, .text-squared.td-purple { border-color: var(--lh-purple) } .text-underlined.td-purple, .text-wavy.td-purple { text-decoration-color: var(--lh-purple) } .text-highlighted.td-yellow::before { background: var(--lh-yellow) } .text-circled.td-yellow, .text-squared.td-yellow { border-color: var(--lh-yellow) } .text-underlined.td-yellow, .text-wavy.td-yellow { text-decoration-color: var(--lh-yellow) } .text-highlighted.td-orange::before { background: var(--lh-orange) } .text-circled.td-orange, .text-squared.td-orange { border-color: var(--lh-orange) } .text-underlined.td-orange, .text-wavy.td-orange { text-decoration-color: var(--lh-orange) } /* 隐藏文字 */ .text-blank { color: rgba(0,0,0,0) } .text-block { background: rgb(var(--black-monochrome)); color: rgb(var(--black-monochrome)); } .text-blur { filter: blur(0.3em); -webkit-filter: blur(0.3em) } .text-hoverback, .text-selectback { transition-duration: 0.3s; transition-property: background, transform, color } .text-blank.text-hoverback:hover, .text-blank.text-selectback::selection, .text-blank.text-selectback *::selection { color: rgb(var(--black-monochrome)) } .text-block.text-hoverback:hover { background: transparent!important } .text-block.text-selectback::selection, .text-block.text-selectback *::selection { color: rgb(var(--white-monochrome, 255, 255, 255)) } .text-blur.text-hoverback:hover { filter: blur(0)!important; -webkit-filter: blur(0)!important } /** * 附加项 */ .with-border, .with-box-style { border: 1px solid rgb(var(--bright-accent)) } .with-border-dark { border: 1px solid rgb(var(--black-monochrome)) } .with-border-light { border: 1px solid rgb(var(--white-monochrome)) } .with-border-thick { border-width: 2px } .with-shadow-sm { box-shadow: 0 0 0.1em rgba(0,0,0,0.2) } .with-shadow { box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.2) } .with-shadow-lg { box-shadow: 0 0.15em 0.3em rgba(0,0,0,0.2) } .with-shadow-xl { box-shadow: 0 0.2em 0.5em rgba(0,0,0,0.2) } .with-shadow-xxl { box-shadow: 0 0.25em 0.8em rgba(0,0,0,0.2) } .with-padding, .with-box-style { padding: 0.25em 1em } .with-p-sm { padding: 0.125em 0.5em } .with-p-lg { padding: 0.5em 2em } .with-margin, .with-box-style { margin: 1em auto } .with-m-sm { margin: 0.5em auto } .with-m-lg { margin: 2em auto } .with-narrow-width { width: 90%!important; margin-left: auto; margin-right: auto } @media screen and (min-width: 768px) { .with-narrow-width { width: 75%!important } } [class*="with-bg-"], [class*="with-bg-"] h1 { color: #fff!important } .with-bg-red { background: var(--lh-red)!important } .with-bg-blue { background: var(--lh-blue)!important } .with-bg-green { background: var(--lh-green)!important } .with-bg-darkgreen { background: var(--lh-dark-green)!important } .with-bg-yellow { background: var(--lh-yellow)!important } .with-bg-orange { background: var(--lh-orange)!important } .with-bg-purple { background: var(--lh-purple)!important } /** * 删除类 */ .offwith-shadow { box-shadow: none!important } .offwith-border { border: none!important } .offwith-padding, .offwith-pam { padding: 0!important } .offwith-margin, .offwith-pam { margin: 0!important } .offwith-width-limit { width: auto!important; margin-left: auto!important; margin-right: auto!important } div[class*="grider"].offwith-grid-gap { grid-gap: 0!important } /** * 网格布局 */ /* Gridder 容器 */ div[class*="gridder"] { display: grid; box-sizing: border-box; grid-gap: 1rem; padding: 0 } div[class*="gridder"] * { box-sizing: border-box } .gridder, .gridder-col-2 { grid-template-columns: 1fr 1fr; } .gridder-col-3 { grid-template-columns: repeat(3, 1fr); } .gridder-col-4 { grid-template-columns: repeat(4, 1fr); } @media screen and (min-width: 768px) { .pc-gridder, .pc-gridder-col-2 { grid-template-columns: 1fr 1fr; } .pc-gridder-col-3 { grid-template-columns: repeat(3, 1fr); } .pc-gridder-col-4 { grid-template-columns: repeat(4, 1fr); } } .spanner, .spanner-2 { grid-column-start: span 2; } .spanner-3 { grid-column-start: span 3; } /** * 告示组件 */ .signblock, .signblock-dark, .signblock-warn { margin: 1rem auto; box-shadow: 0 0.1rem 0.3rem rgba(0,0,0,0.4); background: rgb(var(--lh-white-bg)); font-size: 1.05rem; padding: 2rem } @media screen and (min-width: 768px) { .signblock, .signblock-dark, .signblock-warn { width: 75% } } .signblock-dark, .signblock-dark h1 { background: rgb(var(--lh-dark-bg)); color: #fff } .signblock-warn, .signblock-warn h1 { background: var(--lh-red); color: #fff } .signblock h1, .signblock-dark h1, .signblock-warn h1 { text-align: center; font-size: 2rem; margin: 0; font-weight: 700 } .signblock-img { display: flex; flex-direction: row; justify-content: center } .signblock-img img { width: 8em } .signblock-footer { font-size: 0.9em; text-align: center; margin: 0.5rem 0; font-weight: bolder; display: block } /** * 报告 */ .reportblock, .reportblock-dark { border: 2px solid rgb(var(--lh-border-color)); box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3); background: rgb(var(--white-monochrome)); padding: 0.8rem 1.5rem; padding-bottom: 0.4rem; margin: 1.5rem auto; margin-bottom: 1rem; position: relative } .reportblock hr, .reportblock-dark hr { background-color: rgb(var(--lh-border-color)); margin-left: -1.5rem; margin-right: -1.5rem } .reportblock h1:first-child, .reportblock-dark h1:first-child { position: absolute; top: -1rem; left: 1.5rem; font-size: 110%; font-weight: 600; background: rgb(var(--lh-border-color)); color: #fff; padding: 0.2rem 0.5rem; margin: 0; } .reportblock-dark, .reportblock-dark h1 { border-color: rgb(var(--lh-white-bg)); background: rgb(var(--lh-dark-bg)); color: #fff } .reportblock-dark hr { background-color: rgb(var(--lh-white-bg)); } /* 更好的折叠框 */ .bettercollap { margin: 1em 0; } .bettercollap .collapsible-block { width: auto; overflow: hidden; border: 1px solid rgb(var(--lh-border-color)) } .bettercollap .collapsible-block-content, .bettercollap .collapsible-block-link { background: rgb(var(--white-monochrome)); padding: 0.5em } .bettercollap .collapsible-block-content { padding-left: 1em; padding-right: 1em } .bettercollap .collapsible-block-link { color: rgb(var(--lh-border-color)); background: rgb(var(--white-monochrome)); transition: .3s; display: block; } .bettercollap .collapsible-block-link:hover, .bettercollap .collapsible-block-unfolded .collapsible-block-link, .styledcollap.bettercollap .collapsible-block-link { color: rgb(var(--white-monochrome)); background: rgb(var(--lh-border-color))!important; text-decoration: none } .bettercollap .collapsible-block-link:hover a { color: rgb(var(--white-monochrome)) } .bettercollap .collapsible-block-link::before { content: "\25BC"; display: inline-block; margin-right: 0.5em; transform: rotate(-90deg) scale(0.9) } .bettercollap .collapsible-block-unfolded .collapsible-block-link::before { transform: rotate(0) scale(0.9) } .bettercollap .collapsible-block + .collapsible-block { border-top: none } .styledcollap.bettercollap .collapsible-block { border-radius: 2px; box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,0.3) } .styledcollap.bettercollap .collapsible-block-content { background-color: rgb(var(--pale-gray-monochrome)); border-width: 3px } .styledcollap.bettercollap .collapsible-block-link:hover { background: rgba(var(--lh-border-color),0.95)!important; } /** * 提示框 */ .infoblock { color: #f1f1f1; font-weight: bold; background: #424242; padding: 5px 5px 5px 5px; border-radius: 4px; margin: -0.5rem 0 1rem 0; display: block; width: fit-content; padding-right: 25px; } .infoblock::before { content: "ⓘ " } /** * 单页迭代 */ .offset-page:not(:target), .offset-page:target ~ div#u-default-page { display: none } .offset-page:target { display: block }
总览
思绪如雨落下
由 the Jotaro 制作
由 the Jotaro 制作
43 个评分
活跃成员的更迭很快，先留个自我介绍。欢迎来到我的作者页，阈限版式爱好者的地狱，纯欲后室人的诅咒之地。
前作者，基本都是写着玩。前管理。译者。
主要在SCP创作，现已不再关注后室创作。如果有兴趣的话，偶尔看两眼。
前作者，基本都是写着玩。前管理。译者。
主要在SCP创作，现已不再关注后室创作。如果有兴趣的话，偶尔看两眼。
6407
43
43
本页面字符数
当前评分人数
当前评分人数
指南索引
✨
the Jotaro的库✨
| 名称 | 评分 | 发布时间 | 测评数 | 评价 |
|---|---|---|---|---|
| Level C-343 | 73 (+77/-4) | 05 Jun 2022 11:15 | 14 | |
| 你应当知晓的理念——关于The M.E.G. | 62 (+62/-0) | 08 May 2022 16:09 | 11 | |
| Level C-474 | 61 (+69/-8) | 21 Aug 2022 03:24 | 17 | |
| Entity C-4444-J - “四蛋” | 61 (+65/-4) | 05 Jul 2022 16:10 | 23 | |
| Level C-117 | 60 (+73/-13) | 20 Feb 2022 02:42 | 30 | |
| 星夜依旧 | 48 (+50/-2) | 24 Jan 2023 13:38 | 7 | |
| 2022拼尸竞赛赛后特别篇 | 43 (+43/-0) | 18 Jun 2022 13:20 | 10 | |
| Entity C-10 - 异人 | 38 (+41/-3) | 16 Oct 2022 17:52 | 7 | |
| Level C-25 | 33 (+36/-3) | 15 Feb 2022 14:30 | 9 | |
| 词条搜索：“Object C-117” | 29 (+33/-4) | 06 Aug 2022 06:52 | 4 | |
| 会见职员 | 28 (+30/-2) | 06 Nov 2022 06:15 | 47 | |
| 2022 后室0.5K竞赛 | 28 (+28/-0) | 08 Aug 2022 15:59 | 73 | |
| 长眠他处，铭记于此 | 25 (+26/-1) | 15 Jun 2022 10:03 | 2 | |
| 悲寂索寞 | 18 (+18/-0) | 23 Apr 2022 17:51 | 8 | |
| MAST职员工作守则与流程 | 17 (+19/-2) | 06 Nov 2022 06:16 | 5 | |
| 竞赛和赞助政策 | 16 (+16/-0) | 14 Jan 2023 11:21 | 5 | |
| Level C-138 | 13 (+14/-1) | 14 May 2022 20:29 | 1 | |
| 放在作者页里的懒人页面检索工具的使用方法 | 11 (+13/-2) | 08 Mar 2023 13:36 | 10 |
| 名称 | 评分 | 发布时间 | 测评数 |
|---|---|---|---|
| 夜间步行 | 5 (+5/-0) | 24 Aug 2023 09:12 | 5 |
| 断绝 | 6 (+6/-0) | 21 Aug 2023 10:48 | 4 |
| Level N 情报汇集中心 | 7 (+7/-0) | 21 Aug 2023 13:02 | 1 |
| Level 808 N - “摩肩接踵” | 10 (+10/-0) | 20 Aug 2023 13:18 | 6 |
👾the Jotaro的创意工坊👾
/* 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; }
✒️留言✒️
momsknife：一个低调、优秀且认真的作者/前辈。
azureactive：不要删站啊啊啊啊啊！！！
Ming Zhao：（搬来一把遮阳伞）（搬来一把折叠椅）（躺下）（喝夜芷椰汁）（看橙子玩水）（想要一起玩水）（跃跃欲试地起身）（跑向海边）（被沙堡绊倒）（倒插在沙滩里）
- Discord：lefs_kamone
- 尚未解锁