@import url(https://scpsandboxcn.wikidot.com/local--files/typeface/Typeface-BWCKKT.css); @import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&display=swap'); @import url("https://vivarium.wdfiles.com/local--files/backrooms%3Avivtheme/stylesheet.css"); /* Myrand */ @media screen and (prefers-reduced-motion: no-preference) { #page-title, #breadcrumbs, #page-content > * { animation-name: fadeIn; animation-duration: 1s; animation-iteration-count: 1; animation-timing-function: ease-out; animation-fill-mode: backwards; } } #page-title { animation-delay: 0s; } @keyframes fadeIn { from { opacity: 0; transform: translate(0,30px); } to { opacity: 1; transform: translate(0,0); } } :root { --fade-in-delay: 0.1s; --fade-in-delay-typing: 4s; --typing-speed: 6s; --theme-base: "black-highlighter"; --theme-id: "critical-status"; --theme-name: "Critical Status"; --logo-image: url("https://backroomssandboxcn.wdfiles.com/local--files/lost-disgaea/Blackstar.png"); --header-title: "Blackstar Megaacademic"; --header-subtitle: "直至末日降临"; --body-font: punctuation-marks, Huiwen-mincho, sans-serif; --header-font: 'Chakra Petch', BWCKKT, sans-serif; --title-font: 'Chakra Petch', BWCKKT, sans-serif; --mono-font:'ZCOOL XiaoWei','Dotted Songti Square', 'PT Sans', '微软雅黑', monospace; --white-monochrome: 255, 255, 255; --pale-gray-monochrome: 190, 190, 190; --light-gray-monochrome: 160, 160, 160; --gray-monochrome: 72, 69, 60; --black-monochrome: 25, 25, 25; --bright-accent: 220, 48, 35; --medium-accent: 220, 48, 35; --custom-text: 255, 255, 255; --dark-accent: 140, 136, 126; --pale-accent: 140, 136, 126; /* Primary Theme Colors */ --swatch-background: var(--black-monochrome); --swatch-primary: var(--bright-accent); --swatch-primary-darker: var(--medium-accent); --swatch-primary-darkest: var(--black-monochrome); /* Primary Text Colors */ --swatch-text-dark: var(--custom-text); --swatch-text-light: var(--bright-accent); --swatch-important-text: var(--bright-accent); --barColour: var(--very-light-gray-monochrome); --linkColour: var(--pale-accent); /* Primary Menu Colors */ --swatch-menubg-color: var(--black-monochrome); --swatch-menubg-light-color: var(--dark-gray-monochrome); --swatch-menubg-medium-color: var(--medium-accent); --swatch-menubg-medium-dark-color: var(--gray-monochrome); --swatch-menubg-dark-color: var(--dark-gray-monochrome); --swatch-menubg-black-color: var(--black-monochrome); --swatch-menubg-hover-color: var(--black-monochrome); --swatch-menutxt-dark-color: var(--white-monochrome); --swatch-menutxt-light-color: var(--white-monochrome); --swatch-border-color: var(--bright-accent); /* Primary Header Colors */ --swatch-headerh1-color: var(--white-monochrome); --swatch-headerh2-color: var(--white-monochrome); --swatch-topmenu-border-color: var(--bright-accent); --swatch-topmenu-bg-color: var(--black-monochrome); /* Link Colors */ --link-color: var(--bright-accent); --visited-link-color: var(--medium-accent); --hover-link-color: var(--bright-accent); --sidebar-links-text: var(--swatch-menutxt-dark-color); --link-color-bright: var(--medium-accent); /* Rating Module Colors */ --rating-module-button-color: var(--bright-accent); --rating-module-text-color: var(--white-monochrome); --rating-module-text-hover-color: var(--swatch-menutxt-light-color); /* Header Gradients */ --gradient-header: none; --diagonal-stripes: none; /*---------------------- 引用内容 ---------------------*/ --light-pale-gray-monochrome: 150,150,150;/**/ /*↑ 浅灰色 ↑*/ --very-light-gray-monochrome:190,187,156;/**/ /*↑ 浅灰色 ↑*/ --light-pale-gray-monochrome: 205, 205, 205; /*↑ 浅灰色 ↑*/ --very-light-gray-monochrome: 215, 215, 215; /*↑ 浅灰色 ↑*/ --alt-accent: 221, 102, 17; /*↑ 橘色,页面不存在的链接颜色 ↑*/ --very-dark-accent: 591,5,4; /*↑ 非常深的红色 ↑*/ --alt-accent: 204,102,0; /*↑ 橘色,页面不存在的链接颜色 ↑*/ --alt-accent: 204,102,0; /*↑ 橘色,页面不存在的链接颜色 ↑*/ --swatch-tertiary-color:150,158,200; --swatch-text-secondary-color:255,245,255; --display-green:23,230,16; --darkest-blue: 22,45,65; --pale-blue:122,145,165; --sel-txt-color:rgb(var(--display-green)); --sel-bg-color:rgba(0,0,0,0.3); --table-border-color:rgba(var(--pale-blue),0.8); --table-th-color:rgba(255,255,255,0.8); --table-th-bg:rgba(var(--darkest-blue),0.8); --quote-bg:rgba(var(--swatch-secondary-color),0.8); --quote-bd-c11:rgba(var(--swatch-text-general),0.8); --quote-bg-box111:rgba(var(--swatch-secondary-color),0.8); --quote-bghv-box111:rgba(33,33,33,0.8); --quote-bd-sz11:2px; --quote-bd:4px solid rgba(33,33,33,0.8); --hdbg-scanline-000:linear-gradient(0deg, transparent 0%, transparent 2%,var(--scanline-cl-111) 5%, var(--scanline-cl-222) 20%, var(--scanline-cl-222) 40%, var(--scanline-cl-111) 60%, transparent 90%, transparent 100%); --hdtt-scanline-00w:-webkit-linear-gradient(0deg,transparent 2%,var(--scanline-cl-111) 5%, var(--scanline-cl-111) 10%, var(--scanline-cl-222) 20%, var(--scanline-cl-222) 40%, var(--scanline-cl-111) 60%, transparent 90%, transparent 100%); --scanline-ct-bg:rgba(var(--darkest-blue),0.8); --scanline-ct-width:3rem; --scanline-limit222:100%; --hdbg-scanline-111:linear-gradient(-90deg, transparent 0%, transparent 2%,var(--scanline-cl-111) 5%, var(--scanline-cl-222) 20%, var(--scanline-cl-222) 40%, var(--scanline-cl-111) 60%, transparent 90%, transparent 100%); --hdtt-scanline-11w:-webkit-linear-gradient(0deg,transparent 2%,var(--scanline-cl-111) 5%, var(--scanline-cl-111) 10%, var(--scanline-cl-222) 20%, var(--scanline-cl-222) 40%, var(--scanline-cl-111) 60%, transparent 90%, transparent 100%); --scanline-letter-speed:5s; --scanline-cl-444:rgba(0,255,255,1); --scanline-cl-333:rgba(0,191,255,1); --hdbg-scanline-222:linear-gradient(-90deg, transparent 0%, transparent 2%,var(--scanline-cl-333) 5%, var(--scanline-cl-444) 20%, var(--scanline-cl-444) 40%, var(--scanline-cl-333) 60%, transparent 90%, transparent 100%); --hdbg-scanline-22w:-webkit-linear-gradient(-90deg, transparent 0%, transparent 2%,var(--scanline-cl-333) 5%, var(--scanline-cl-444) 20%, var(--scanline-cl-444) 40%, var(--scanline-cl-333) 60%, transparent 90%, transparent 100%); --hdbg-scanline-333:linear-gradient(180deg, transparent 0%, transparent 60%,var(--scanline-cl-333) 80%, var(--scanline-cl-444) 85%, var(--scanline-cl-444) 90%, var(--scanline-cl-333) 95%, transparent 98%, transparent 100%); --hdbg-scanline-33w:-webkit-inear-gradient(180deg, transparent 0%, transparent 60%,var(--scanline-cl-333) 80%, var(--scanline-cl-444) 85%, var(--scanline-cl-444) 90%, var(--scanline-cl-333) 95%, transparent 98%, transparent 100%); } /*---------------------- 引用终点 ---------------------*/ #extrac-div-1 { position: fixed; width: 100vw; height: 100vh; pointer-events: none; background: repeating-linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.15) 50%,rgba(0,0,0,0)); background-size: auto 8px; opacity: 0.7; } #extrac-div-2 { position: fixed; width: 100vw; height : 1rem; top: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(220, 48, 35) 0%,rgba(220, 48, 35,1) 50%,rgba(220, 48, 35,0.98) 51%,rgba(220, 48, 35) 100%); opacity : .1; animation: scanm 6s linear infinite; } @keyframes scanm { 0% { top: -1rem; opacity : .05;} 25% { top: 50%; opacity: .03;} 37.5% { top: 75%; opacity: 0.06;} 50% { top: 100%; opacity: .03;} 100% { top: 100%;} } #extrac-div-3 { position: fixed; width: 100vw; height: 100vh; pointer-events: none; background-image: radial-gradient(circle, rgb(0,0,0) 0%, rgb(220, 48, 35) 60%, rgb(255,0,0) 100%); opacity: 0.25; mix-blend-mode: color-dodge; background-repeat: no-repeat; background-size: cover; z-index: 30; } #page-content > :nth-child(1) { animation-delay: calc(1 * var(--fade-in-delay)); } #page-content > :nth-child(2) { animation-delay: calc(2 * var(--fade-in-delay)); } #page-content > :nth-child(3) { animation-delay: calc(3 * var(--fade-in-delay)); } #page-content > :nth-child(4) { animation-delay: calc(4 * var(--fade-in-delay)); } #page-content > :nth-child(5) { animation-delay: calc(5 * var(--fade-in-delay)); } #page-content > :nth-child(6) { animation-delay: calc(6 * var(--fade-in-delay)); } #page-content > :nth-child(7) { animation-delay: calc(7 * var(--fade-in-delay)); } #page-content > :nth-child(8) { animation-delay: calc(8 * var(--fade-in-delay)); } #page-content > :nth-child(9) { animation-delay: calc(9 * var(--fade-in-delay)); } #page-content > :nth-child(10) { animation-delay: calc(10 * var(--fade-in-delay)); } #page-content > :nth-child(11) { animation-delay: calc(11 * var(--fade-in-delay)); } #page-content > :nth-child(12) { animation-delay: calc(12 * var(--fade-in-delay)); } #page-content > :nth-child(13) { animation-delay: calc(13 * var(--fade-in-delay)); } #page-content > :nth-child(14) { animation-delay: calc(14 * var(--fade-in-delay)); } #page-content > :nth-child(15) { animation-delay: calc(15 * var(--fade-in-delay)); } #page-content > :nth-child(n+15) { animation-delay: calc(16 * var(--fade-in-delay)); } #skrollr-body { background-image: radial-gradient(circle, rgb(var(--black-monochrome)) 50%, transparent 0); background-repeat: repeat; background-size: 0.25em 0.25em; width: 100%; height: 7.5rem; } #side-bar .side-block div a img { filter: grayscale(100%); } #container { background-image: radial-gradient(circle, rgb(var(--medium-accent), 0.05) 50%, transparent 0); background-size: 0.25em 0.25em; background-repeat: repeat; background-attachment: fixed; } div#page-options-bottom-2 > a, div#page-options-bottom > a { border-radius: 0em; -moz-border-radius: 0em; border: none; } div#page-options-bottom-2 > a:active, div#page-options-bottom-2 > a:hover, div#page-options-bottom > a:active, div#page-options-bottom > a:hover { border: none; } #header, #top-bar { background-attachment: scroll; } #header { background-image: none; } #header::before { content: ""; position: absolute; height: 100%; width: 100%; left: 0; top: 0; background-image: var(--logo-image); background-size: auto 16rem; background-position: center; background-repeat: no-repeat; opacity: 0.4; } #header h1, #header h1 a { position: absolute; top: 1rem; margin: 0; width: 100%; display: flex; justify-content: center; z-index: 0; } #header h2, #header h2 span, #header h2 span::before { position: absolute; top: 2rem; margin: 0; width: 100%; display: flex; justify-content: center; } #header h1 a::before, #header h2 span::before { text-shadow: .063rem 0.1rem 0.1rem #0c0c0c; } a.newpage { background: transparent; text-decoration: none } a.newpage { color: rgb(var(--newpage-color)) } blockquote { box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .lightstyled-quote { background-color:rgb(var(--bright-accent)); color:rgb(255, 255, 255); border-left: 0.5rem solid rgba(var(--dark-gray-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .darkstyled-quote { background-color:rgb(var(--dark-gray-monochrome)); border-left: 0.5rem solid rgba(var(--bright-accent)); color:rgb(var(--white-monochrome)); padding: 0.1rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0.05rem 0.1rem 0.3rem rgba(0,0,0,.25); } .darkstyled-quote a{ color: rgb(var(--swatch-menubg-medium-color)); } .lightblock { background-color:rgb(var(--bright-accent)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .darkblock { background-color:rgb(var(--dark-gray-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); } .dark-borderblock { background-color:rgb(var(--dark-gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--bright-accent)); } .light-borderblock { background-color:rgb(var(--bright-accent)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--dark-gray-monochrome)); } .border-logoblock{ padding: 0.01rem 1rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); color:rgb(255, 255, 255); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--dark-gray-monochrome)); border: solid 0.3rem rgb(var(--bright-accent)); } .border-logoblock::after{ content: ""; float: center; border: solid 2px #0000; background:url("https://backroomssandboxcn.wdfiles.com/local--files/lost-disgaea/Blackstarwhite.png") center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .logoblock{ padding: 0.01rem 1rem; color:rgb(255, 255, 255); box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); margin: 0.5rem 0 0.5rem 0.25rem; display: block; position: relative; background-color: rgb(var(--dark-gray-monochrome)); } .logoblock::after{ content: ""; float: center; border: solid 2px #0000; background: url("https://backroomssandboxcn.wdfiles.com/local--files/lost-disgaea/Blackstarwhite.png") center/25% no-repeat; opacity: 0.25; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1; } .borderblock { background-color:rgb(var(--dark-gray-monochrome)); color:rgb(255, 255, 255); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0.25rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border: solid 0.3rem rgb(var(--bright-accent)); } .darkblock a { color: rgb(var(--swatch-menubg-medium-color)); } /* ------------ 引用引用块 ------------------ */ .stripeblock{ background: repeating-linear-gradient(45deg, #360509, #360509 4px, #ff1428 5px, #ff1428 5px); color:rgb(var(--white-monochrome)); padding: 0.01rem 1rem; margin: 0.5rem 0 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.25); border-left: 0.5rem solid rgba(var(--dark-gray-monochrome)); border-right: 0.5rem solid rgba(var(--dark-gray-monochrome)); } .blockquote hr, blockquote hr{ opacity: 0.5; } code,.code{ border: .12rem dashed rgba(var(--swatch-border-color),.5); } /* ------------ 标题盒子 ------------------ */ .titleblock { background-color: rgb(var(--dark-gray-monochrome)); color:rgb(var(--white-monochrome)); padding: 0.5rem 1rem 0.10rem; margin: 1.5rem 0rem 0.5rem 0rem; box-shadow: 0 0.2rem 0.3rem rgba(0,0,0,.5); border: solid rgb(var(--bright-accent)) 2px; } .titlebox{ color: rgb(var(--white-monochrome)); position: relative; top: -1.6rem; background-color: rgb(var(--bright-accent)); padding: 0.25rem 1rem; line-height: 0.1rem; } .titleblock-green, .titleblock-green .titlebox { border: solid rgb(var(--display-green)); 2px; } .titleblock-green .titlebox{ color: rgb(var(--dark-gray-monochrome)); background-color: rgb(var(--display-green)); } .titleblock-blue, .titleblock-green .titlebox { border: solid rgb(var(--display-green)); 2px; } .titleblock-blue .titlebox{ color:rgb(var(--white-monochrome)); background-color: rgb(var(--pale-blue)); } .titleblock-blue, .titleblock-green .titlebox { border: solid rgba(var(--pale-blue),0.9); 2px; } /* ------------ 流光盒子 ------------------ */ .blinkblock{ padding: 0 0.5rem; background-color: rgba(10,15,12,0.8); border:3px solid green; padding: 0 0.5rem; -webkit-animation-timing-function:ease-out; -webkit-animation-direction:alternate; -webkit-animation: blinkborder 1s infinite; animation: blinkborder 1s infinite; animation-timing-function:ease-out; animation-direction:alternate; } .blinlbar{ opacity: 0; -webkit-animation: blinkbar 2s infinite; animation: blinkbar 2s infinite; } @keyframes blinkborder { to { border-color:rgb(var(--display-green)); } } @keyframes blinkbar { to { opacity: 1 } } /* ------------ 动线 ------------------ */ .linebolck-outbox { padding: var(--quote-bd-sz11); transition: ease-in .3s; background: linear-gradient(0, var(--quote-bd-c11) var(--quote-bd-sz11), var(--quote-bd-c11) var(--quote-bd-sz11)) no-repeat, linear-gradient(-90deg, var(--quote-bd-c11) var(--quote-bd-sz11), var(--quote-bd-c11) var(--quote-bd-sz11)) no-repeat, linear-gradient(-180deg, var(--quote-bd-c11) var(--quote-bd-sz11), var(--quote-bd-c11) var(--quote-bd-sz11)) no-repeat, linear-gradient(-270deg, var(--quote-bd-c11) var(--quote-bd-sz11), var(--quote-bd-c11) var(--quote-bd-sz11)) no-repeat; background-size: 0 var(--quote-bd-sz11), var(--quote-bd-sz11) 0, 0 var(--quote-bd-sz11), var(--quote-bd-sz11) 0; background-position: left top, right top, right bottom, left bottom; border: var(--quote-bd); } .linebolck-outbox:hover{ background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%; } .linebolck-inbox{ padding:0.5rem 1rem; background: var(--quote-bg-box111); } .linebolck-inbox:hover{ background:var(--quote-bghv-box111); transition: ease-in .3s; } /* ------------ 单行扫描线 ------------------ */ #page-content .scanline-letter-verti p, #page-content .scanline-letter p{ background-color: rgba(var(--swatch-text-general),1); background-image: var(--hdbg-scanline-22w); background-image: var(--hdbg-scanline-222); -webkit-background-clip: text; color: transparent; -webkit-animation: scanlineletter var(--scanline-letter-speed) infinite; animation: scanlineletter var(--scanline-letter-speed) infinite; background-clip: text; -webkit-text-fill-color:transparent; background-size: 0% 0%; background-repeat: no-repeat; } #page-content .scanline-letter-verti p{ background-color: rgba(var(--swatch-text-general),1); background-image: var(--hdbg-scanline-33w); background-image: var(--hdbg-scanline-333); -webkit-animation: scanlineletter333 var(--scanline-letter-speed) infinite; animation: scanlineletter333 var(--scanline-letter-speed) infinite; } @keyframes scanlineletter{ 0% { background-size: 0% 100%; } 100% { background-size:200% 100%; } } @keyframes scanlineletter333{ 0% { background-size: 100% 0%; } 100% { background-size:100% 300%; } } /* ------------ 表格 ------------------ */ table.wiki-content-table td, table.wiki-content-table th, table.wiki-content-table tr { border: .1rem solid var(--table-border-color) !important; } table.wiki-content-table th { color:var(--table-th-color); background: var(--table-th-bg); } /* ------------ 图片框 ------------------ */ .scp-image-block { --box-shadow: rgba(var(--darkest-blue),0.8); border: .0625rem outset rgba(var(--swatch-primary),1); } /*====================== 结尾 ========================*/ #page-options-bottom a.btn { opacity: 0.8; } #footer a, #page-options-container a.btn { color:var(--color-options-btn); } /*====================== 特效 ========================*/ /* ------------ 打字机 ------------------ */ .typing-center{ font-size: 150%; text-align: center; } /* 打字机动作 */ #page-content .et-typing p{ background-image: linear-gradient(0deg, rgb(var(--swatch-text-general)) 100%, transparent); -webkit-background-clip: text; color: transparent; animation: etwww var(--typing-speed) forwards; background-clip: text; -webkit-text-fill-color:transparent; background-size: 100% 0%; background-repeat: no-repeat; } @media (max-width: 500px) { #page-content .et-typing p{ animation: etwwwmob 3s forwards; background-size: 0% 100%; } } @keyframes etwww{ 0% { background-size: 0% 100%; } 100% { background-size:100% 100%; } } @keyframes etwwwmob{ 0% { background-size: 100% 0%; } 100% { background-size:100% 100%; } } #page-content .et-typing p:nth-child(2) { animation-delay: calc(0.5 * var(--fade-in-delay-typing)); } #page-content .et-typing p:nth-child(3) { animation-delay: calc(1 * var(--fade-in-delay-typing)); } #page-content .et-typing p:nth-child(4) { animation-delay: calc(2 * var(--fade-in-delay-typing)); } #page-content .et-typing p:nth-child(5) { animation-delay: calc(3 * var(--fade-in-delay-typing)); } #page-content .et-typing p:nth-child(6) { animation-delay: calc(4 * var(--fade-in-delay-typing)); } #page-content .et-typing p:nth-child(n+7) { animation-delay: calc(n * var(--fade-in-delay-typing)); }
版式由Lost Disgaea制作,主体框架修改自
Etinjat 制作的 版式:故障数据库 与
MyrandFox 制作的 版式:临界状态 。扫描线效果来自
EstrellaYoshte。
若需将本版式引入到你的页面中,请将以下文本放到任意位置:
[[include :backrooms-wiki-cn:theme:B-S-M]]
示例

黑星
可通过五个连字符“-----”创建水平分割线。若它未被放在其他部件(诸如引用块)中,则会左右延伸贯穿页面。这种将文件分割为多个部分的线就是分割线。
标题可通过在一行字起始处输入 1 至 6 个加号“+”来创建。
此为分页(tab view)。
看,这有更多文字。
多么精巧绝伦。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个长的 tab,它有很多文字。
这是一个引用块,在一行字的起始处加上“> ”来创建。
更多文字
一条分割线
嵌套引用块
这是 | 表格 |
---|---|
你应该老早 | 就知道怎么 |
做这个了吧 |
标题字体是 Chakra Petch / 白无常可可体
等宽字体是 站酷小薇

黑星(白色,素材用)
脚1
这段文本
放在这里
你们就能
看到不同
格式以及
其它东西
看起来是
怎么运作
包括那些不存在
以及存在的链接!
天啊。
[[div class="lightblock"]]
[[/div]]
[[div class="darkblock"]]
[[/div]]
[[div class="lightstyled-quote"]]
[[/div]]
[[div class="darkstyled-quote"]]
[[/div]]
[[div class="logo-block"]]
[[/div]]
[[div class="border-logoblock"]]
[[/div]]
[[div class="dark-borderblock"]]
[[/div]]
[[div class="light-borderblock"]]
[[/div]]
[[div class="stripeblock"]]
[[/div]]
[[div class="blinkblock"]]
光标[]
[[span class="blinlbar"]][][[/span]]
[[/div]]
[[div class="linebolck-outbox"]]
[[div class="linebolck-inbox"]]
请把鼠标移到此处
[[/div]]
[[/div]]
[[div class="scanline-letter"]]
横着扫描
[[/div]]
[[div class="scanline-letter-verti"]]
竖着扫描
[[/div]]
1. 该扫描线只能扫描 p 标签的段落,亦即文本段落。
ps,为了让垂直扫描线能扫完一段而不是分行扫描,可以在另起一行时,用四个@符号作为分行符,且与前后句子相贴。像这样
[[div class="scanline-letter-verti"]]
正文
@@@@
另一行
[[/div]]
3. 垂直扫描线会随着内容变多而扫描速度变快,为了解决这个问题,可以调节扫描用时这个参数,单位上 s ,亦即每秒。
[[module css]]
:root{
—scanline-letter-speed: 4s;
}
[[/module]]
[[div class="et-typing"]]
打字机特效
[[/div]]
-
- _
1. 打字机效果仅限于 p 标签的段落。
亦即你需要单独空一行才能有先后而非同时。
2. 应尽量保持每行短小,以免段落过长自动换行。
3. 在手机窄屏下,会变成通常的从上到下的渐入。
插入文本
[[div class="titleblock"]]
[[span class="titlebox"]]插入文本[[/span]]
[[/div]]
插入文本
[[div class="titleblock titleblock-green"]]
[[span class="titlebox"]]插入文本[[/span]]
[[/div]]
插入文本
[[div class="titleblock titleblock-blue"]]
[[span class="titlebox"]]插入文本[[/span]]
[[/div]]