Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <a href="#" class="back"></a>
<section>
      <h3>第一章 绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红绯红</h3>
      <p>  </p><p>  痛!</p><p>  好痛!</p><p>  头好痛!</p><p>  光怪陆离满是低语的梦境迅速支离破碎,熟睡中的周明瑞只觉脑袋抽痛异常,仿佛被人用棒子狠狠抡了一下,不,更像是遭尖锐的物品刺入太阳穴并伴随有搅动!</p><p>  嘶……迷迷糊糊间,周明瑞想要翻身,想要捂头,想要坐起,可完全无法挪动手脚,身体似乎失去了控制。</p><p>  看来我还没有真醒,还在梦里……等下说不定还会出现自以为已经醒了,实际依然在睡的情况……对类似遭遇不算陌生的周明瑞竭力集中意志,以彻底摆脱黑暗和迷幻的桎梏。</p><p>  然而,半睡半醒之时,意志总是飘忽如同烟雾,难以控制,难以收束,他再怎么努力,依旧忍不住思维发散,杂念浮现。</p><p>  好端端的,大半夜的,怎么会突然头痛?</p><p>  还痛得这么厉害!</p><p>  不会是脑溢血什么的吧?</p><p>  我擦,我不会就这样英年早逝了吧?</p><p>  赶紧醒!赶紧醒!</p><p>  咦,好像没刚才那么痛了?但脑子里还是跟有把钝刀子在慢慢割一样……</p><p>  看来没法继续睡了,明天还怎么上班?</p><p>  还想什么上班?有货真价实的头痛,当然是请假啊!不用怕经理罗里吧嗦!</p><p>  这么一想,好像也不坏啊,嘿嘿,偷得浮生半日闲!</p><p>  一阵又一阵的抽痛让周明瑞点滴积累起虚幻的力量,终于,他一鼓作气地挺动腰背睁开眼睛,彻底摆脱了半睡半醒的状态。</p><p>  视线先是模糊,继而蒙上了淡淡的绯红,目光所及,周明瑞看见面前是一张原木色泽的书桌,正中央放着一本摊开的笔记,纸张粗糙而泛黄,抬头用奇怪的字母文字书写着一句话语,墨迹深黑,醒目欲滴。</p><p>  笔记本左侧靠桌子边缘,有一叠整整齐齐的书册,大概七八本的样子,它们右手边的墙上镶嵌着灰白色的管道和与管道连通的壁灯。</p><p>  这盏灯很有西方古典风味,约成年人半个脑袋大小,内层是透明的玻璃,外面用黑色金属围出了栅格。</p><p>  熄灭的壁灯的斜下方,一个黑色墨水瓶笼罩着淡红色的光华,表面的浮凸构成了模糊的天使图案。</p><p>  墨水瓶之前,笔记本右侧,一根肚腹圆润的深色钢笔静静安放,笔尖闪烁着微光,笔帽搁于一把泛着黄铜色泽的左轮手枪旁边。</p><p>  手枪?左轮?周明瑞整个人都愣住了,眼前所见的事物是如此陌生,与自己房间没半点相像之处!</p><p>  惊愕茫然的同时,他发现书桌、笔记本、墨水瓶、左轮手枪都蒙着一层绯红的“轻纱”,那是窗外照进来的光辉。</p><p>  下意识间,他抬起脑袋,视线一点点上移:</p><p>  半空之中,黑色“天鹅绒幕布”之上,一轮赤红色的满月高高悬挂,宁静照耀。</p><p>  这……周明瑞惶恐莫名,猛地站起,可双腿还未完全打直,脑袋又是一阵抽痛,这让他短暂失去力量,重心不由自主下坠,屁股狠狠地撞击在了硬木所制的椅面上。</p><p>  啪!</p><p>  疼痛未能造成影响,周明瑞以手按桌,重又站起,慌乱地转过身体,打量自身所处的环境。</p><p>  这是个不大的房间,左右两侧各有一扇棕门,紧挨对面墙壁的是张木制高低床。</p><p>  它与左门之间放着个橱柜,上面对开,下方是五个抽屉。</p><p>  橱柜边缘,一人高的位置,同样有灰白色管道镶嵌于墙上,但它连通的是个奇怪的机械装置,少许地方裸露着齿轮和轴承。</p><p>  近书桌的右墙角堆放着类似煤炭炉的事物,以及汤锅、铁锅等厨房用具。</p><p>  越过右门是一扇有两道裂纹的穿衣镜,木制底座的花纹简单而朴素。</p><p>  目光一扫,周明瑞隐隐约约看见了镜中的自己,现在的自己:</p><p>  黑发,褐瞳,亚麻衬衣,体型单薄,五官普通,轮廓较深……</p><p>  这……周明瑞顿时倒吸了口凉气,心头涌现出诸多无助又凌乱的猜测。</p><p>  左轮手枪,欧美古典风味布置,以及那轮与地球迥异的绯红之月,无一不在说明着某件事件!</p><p>  我,我不会穿越了吧?周明瑞嘴巴一点点张开。</p><p>  他看网文长大,对此常有幻想,可当真正遇到,一时却难以接受。</p><p>  这大概就是所谓的叶公好龙吧?过了几十秒,周明瑞苦中作乐地自我吐槽了一句。</p><p>  若非脑袋的疼痛依旧存在,让思维变得紧绷而清晰,他肯定会怀疑自己在做梦。</p><p>  平静,平静,平静……深呼吸了几下,周明瑞努力让自身不要那么慌乱。</p><p>  就在这时,随着他身心的调和,一个个记忆片段突兀跳出,缓慢呈现于他的脑海之中!</p><p>  克莱恩.莫雷蒂,北大陆鲁恩王国阿霍瓦郡廷根市人,霍伊大学历史系刚毕业的学生……</p><p>  父亲是皇家陆军上士,牺牲于南大陆的殖民冲突,换来的抚恤金让克莱恩有了进入私立文法学校读书的机会,奠定了他考入大学的基础……</p><p>  母亲是黑夜女神信徒,在克莱恩通过霍伊大学入学考试那年过世……</p><p>  还有一个哥哥,一个妹妹,共同住在公寓的两居室内……</p><p>  家庭并不富裕,甚至可以说不佳,目前全靠在进出口公司当文员的哥哥维持……</p><p>  作为历史系毕业生,克莱恩掌握了号称北大陆诸国文字源头的古弗萨克语,以及古代陵寝里经常出现,与祭祀、祈祷相关的赫密斯文……</p><p>  赫密斯文?周明瑞心头一动,伸手按住抽痛的太阳穴,将视线投向了书桌上摊开的那本笔记,只觉泛黄纸张上的那行文字从奇怪变得陌生,从陌生变得熟悉,从熟悉变得可以解读。</p><p>  这是用赫密斯文书写的话语!</p><p>  那深黑欲滴的墨迹如是说:</p><p>  “所有人都会死,包括我。”</p><p>  嘶!周明瑞莫名惊恐,身体本能后仰,试图与笔记本,与这行文字拉开距离。</p><p>  他很是虚弱,险些跌倒,慌忙伸手按住桌缘,只觉四周的空气都变得躁动,耳畔隐约有细密的呢喃在回荡,有种小时候听长辈讲恐怖故事的感受。</p><p>  摇了下头,一切只是幻觉,周明瑞重新站稳,将目光从笔记本上移开,大口喘起了气。</p><p>  这时,他的视线落在了那把闪烁黄铜光泽的左轮手枪处,心头霍然冒出了一个疑问。</p><p>  “以克莱恩的家境,哪有钱和渠道买手枪?”周明瑞不由皱起了眉头。</p><p>  沉思之中,他忽然发现书桌边缘多了半个红色手印,色泽比月华更深,比“轻纱”更厚。</p><p>  那是血手印!</p><p>  “血手印?”周明瑞下意识翻开了刚才按住桌缘的右手,低头一瞧,只见掌心和手指满是血污。</p><p>  与此同时,他脑袋的抽痛依旧传来,略微减弱,连绵不绝。</p><p>  “不会磕破头了吧?”周明瑞边猜想边转过身体,走向那面有裂纹的穿衣镜。</p><p>  几步之后,中等身材,黑发褐瞳,有着明显书卷气的身影清晰映入了他的眼帘。</p><p>  这就是现在的我,克莱恩.莫雷蒂?</p><p>  周明瑞怔了一下,因为大半夜光亮不够,看不太清楚,于是又继续往前,直到只差一步就能撞到镜子。</p><p>  就着轻纱般的绯红月光,他侧过脑袋,查看额角的情况。</p><p>  清晰倒映的镜子如实呈现,一个狰狞的伤口盘踞在他的太阳穴位置,边缘是烧灼的痕迹,周围沾满了血污

      </p></section>
              
            
!

CSS

              
                html,body{
  scroll-behavior: smooth;
}
.back{
  position: sticky;
  float: right;
  top: -110px;
  margin-top: -50px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(calc(100vh + 50px));
}
              
            
!

JS

              
                
              
            
!
999px

Console