(´•ω•`๑)

物派(

civetkikyou:

【JCJ】日升降临永夜


乔瑟夫看着西撒消失在真空中。

他看着西撒越飘越远,在无极的黑中翻滚,变成白色的小点,然后湮灭于星辰中。

 ==========

乔瑟夫和西撒是火星空间站附属站的修理工。虽然是基站的修理工,但大部分情况都在出差。太阳系的交通现在已经非常发达。而突发情况也在与日俱增。除日常的基站养护外他们经常要处理基站附近的交通事故。例如突然停摆的飞船求救等等。

空间作业是非常辛苦而缓慢的。与之相对的,是每次工作的时长不能超过15分钟。即使是空间技术发达的现在,太空作业仍然需要背负沉重的氧气罐和防护服,而手指哪怕一个轻微的动作都要消耗巨大的体力。这都导致作业的精度和时长都偏低。

乔瑟夫算是新上岗的学徒。基本上是跟着师兄西撒实习中。

他看着红色的星体,心里却始终觉得应该是蓝色的。

【JOJO,你那边好了吗?】

西撒的声音带着电波的兹兹声在乔瑟夫的头罩里响起来。

【不行,一直套不上去。】

【你喘得太厉害了,不用那么大动作。调整一下呼吸,你的氧气还剩多少?】

乔瑟夫正要答话,脚下却一滑,向一边荡了出去。他赶紧拉了一下身上扣着的绳索,又以令人心急的缓慢速度漂了回去。

着地的时候他看了一眼西撒,西撒的手里没有动作。可见他一直盯着自己这边。

乔瑟夫挥了挥手,示意自己没事。头罩里却突然响起了机械的报告声。

【通知,下一场宇宙尘埃风暴将在10分钟内抵达您所在的区域,请回到驾驶舱,安静等待至风暴结束,再重复一遍……】

报告声使用了英语,德语,法语,西班牙语,中文,日语和意大利语,因此光是报告就过了2分钟。西撒给乔瑟夫做了个手势,要他过去。乔瑟夫调整了一下身上的安全带,然后打开氧气罩的喷气阀门,朝西撒的方向飞了过去。

 ===============

乔瑟夫的安全带搭扣坏了。

他并没有意识到,那个搭扣在刚才的作业中被撞了一下。然而太空服太厚,而警报声又太响。当他快到达西撒身边时,氧气瓶里的氧气也只剩下30%。原本是有50%的,但是刚刚的喷气消耗了一点氧气。而乔瑟夫的呼吸又下意识地很不平稳。他伸出手去,试图抓住西撒。这个动作的难度相当高,因为隔着厚厚的手套,两个人根本感觉不到是否触碰到了对方。而乔瑟夫的安全带已经拉到最长,他正以恒定的速度接近西撒,突然安全带绷直了,又将他拉了回去,这时安全带搭扣彻底坏掉了,它断了开来。

西撒吓得浑身都冰冷了,他知道在太空中毫无凭依的漂浮会是什么结果。

【JOJO,用喷气!控制好方向!】

西撒的呼吸也乱了。

乔瑟夫听见西撒加速的呼吸声从扩音器中传来,也觉得非常紧张。他调整了一下自己的位置,先是试图去抓住比他更加快速向后飘荡的安全带,然而毫无用处。于是他尽量调整方向,试图打开喷气。喷气轻微地喷了一下就响起了警报。

【氧气不足了】

乔瑟夫开始试图闭气和减缓呼吸。他的心跳相当剧烈,但最重要的是冷静下来。

西撒把安全带开到最长,乔瑟夫以缓慢的速度向他移动着,两个人尽力伸出手,试图勾到对方。

然而乔瑟夫的方向还是错了,或者说因为刚刚的事件,他本身带了自转,因此使喷气的方向产生了偏移。在经过了相对最近的那个点之后,两个人又开始互相远离了。

西撒知道乔瑟夫在不能做什么了。他咬了咬牙,松开了自己的安全带。

他打开喷气,小心地调整了力道和角度,尽可能达到最低标准。然后朝乔瑟夫漂了过去。

【西撒!】

【省点氧气】西撒低沉地回答。

然后他抓住了乔瑟夫。

他让乔瑟夫闭嘴,然后尽可能正确地再一次调整喷气的方向和力度。他的氧气也只有30%了。只够使用一次,如果这一次不能到达救护船,就只能在空气中变成宇宙垃圾的一部分。

===================================

乔瑟夫最终撞上了救护船的船舷,他在光滑的船体上用尽全力抓挠着,试图找到可以使自己附着的地方。

他几乎又要在和船体的撞击中向外飞出去了。

风暴已经袭来,宇宙垃圾已经可以被肉眼识别了。

他最终撞在了舱门上,在他还没有意识到的情况下把手腕卡进了舱门的把手中。然后他以最快,但在宇宙中一样缓慢的速度旋开了舱门。打开的一瞬间,船舱内不多的气体仍然形成了气流,将舱门迅速地推开了。周围没有风,没有声音,没有光,但物质从乔瑟夫的身边擦过。乔瑟夫看见自己几分钟前因失误操作而遗落的安全带以极快的速度撞碎了作业船上的工作支架。

乔瑟夫觉得自己听见了撞击的声音,就好像他觉得自己能听见西撒推开他时的撞击一样。


=====================================================

人类自从掌握了空间跳跃的技术后就开始了宇宙的扩张时代。

人类的工作重心前所未有地外扩,大部分的人力物力都消耗在了宇宙中。而这也是值得的。地球不再为人类的矿物质和能源消耗提供100%的支持了。因此大部分的城市都变作农庄。有机的作物是地球现在唯一产出的东西。艺术、工业、制造业几乎都在地球上消失了。取而代之的是田园的风光,有钱而且有权,因此才能留在地球的农场主们。而空气中响起的却不是乡间小调,而是激昂而具有鼓动性的音乐,号召年轻的男孩和女孩们去寻找自己的星球,跟随不同的征服军队。

地球就好像慈祥的老奶奶,辉煌不再,只是安详地观望自己的儿孙们去追求异国他乡的美丽姑娘们。

而儿孙们也只是蜻蜓点水般回来,卸下一批批物资,用来交换下一次出征的粮食。

权利和战争也是人类永恒的主题。他们悄然在真空中发生,传播的速度几乎要用光年来计算。

乔瑟夫和西撒作为近地行星的打工仔,却和这一切毫无关系。

【西撒,下一次到火星是什么时候?】

【如果你说进入大气层的话,大概是下周吧】

火星的改造已经成熟,虽然在地表仍然无法保证生存,但是地下的设施已经相当完备。甚至还有特殊过滤的阳光房,可以让人享受与地球无异的阳光,而且货真价实是由真正的阳光过滤来的。当然阳光房价格不菲,但公共区域的阳光公园两个人还是去的起的。

【啊,好想念脚踏实地的感觉啊~西撒酱不觉得吗?】

【对我来说都一样,我是在太空出生的,大部分情况下都在无重力环境下生活】

【是吗。属于太空的男儿啊。真是热血】

【你呢?地球来的大少爷?现在习惯些了吗】

【……我还是想看看地球啊,下次到了火星,我们先在地表站一会行吗】

【……虽然有设施保护,不过风暴还是很厉害,也不知道能不能看到地球】

【有的,有专门的观察点,我上网查过了。】

即使身处宇宙,人的心却从来都是被家牵引的。就好像一颗星球在旋转中膨胀,一些物质脱离了引力的束缚,变成了一个新的星体,从母星中分离开来,开始在永远的黑暗中孤独旋舞一样。但它最终还是会留在母星附近,要么被捕获成为卫星,要么在相互的引力作用下趋于相对的稳定——终究还是相互联系的。

【JOJO,地球很美吗?】

【恩,你去过吗。有没有见过地球上真正的阳光?】

【去过,不过不觉得有多有意思。】

【哈哈,可能吧,不过前段时间我们在太空中一起看的狮子座流星雨确实比地球上的壮观多了。】

乔瑟夫上岗不久就遇到了宇宙统一纪念日。虽然是个傻名字而且没有实际的意义,因为宇宙显然没有统一。不过这个就相当于太阳系的全系年假,持续一周时间,于是是太空中的旅游黄金周。两个人就一起去看了狮子座流星雨。

【地球上也能看到吗】

【能,但是实际情况要看天气和设备。】

乔瑟夫很高兴有人能陪他聊聊,因此总是话很多。两个人的关系在半个月内突飞猛进,大约是在无垠的太空中身边只有对方这一个活人的缘故。

【其实我不算看见了。那天我们好不容易爬上山,冻了个半死。结果几乎什么也没看见。之好和女朋友好好玩了一下】

他坏兮兮地笑了。

太空中总是男多女少的,能适应无重力环境的女性毕竟不多。大部分都留在各自的行星上。而即使如此西撒也仍然有许多不知道哪冒出来的红颜知己。乔瑟夫在短短的半个月也是见识了不少。大概是这个原因,他主动坦白了自己的感情史。

他有个青梅竹马的女朋友,却在快要结婚的时候和日本来的交换生发生了一夜情,虽然没被发现,但他意识到自己两个都喜欢。

最终他选择了离开地球。

【说起来,你还是很想念她们的吧。】

西撒挤了一个水泡泡出来,然后低下头去用舌头把水勾进了嘴里。

【也许吧】

【像你这样到了能交女朋友的年纪都还能赖在地球上的有钱少爷,居然会为了逃避艳情来太空作修理工,真是不理解你们】

【不,我不是因为逃避才来的。】

乔瑟夫从西撒的下方漂向密封罐中的向日葵,确认了一下情况,然后打了一管营养液进去。

【我一直都有这个想法。想做仰望星空的人。】

他把脸贴在透明的玻璃罐上,透过玻璃仰视着西撒。西撒却没嘲笑他。

【别一直抱着我的花,你自己说你把它送给我了】

乔瑟夫透过罐子看见西撒又喝了一口水。

【你不会养】乔瑟夫说,【我把它带来时你连真正的花都没见过】

=====================


 

他们的方向最终还是选错了。也许是因为乔瑟夫的自转,也许是因为手动控制的精度太低。但他们最终还是擦过了飞船。

【jojo】

西撒看着乔瑟夫。

【氧气还有多少?】

乔瑟夫咽了一口口水,

【没有了,1%了】

【没关系,太空服里还有。】

乔瑟夫看着西撒,他觉得自己知道西撒要做什么。但他不愿意知道。关于这点,他们并没有交谈,却达成了一致。

就在他要伸手的一瞬间,西撒推了他一把,他们本来在空中旋转,而乔瑟夫刚好背对着救护船。

【再见。我想好好抱你一下,但是算了】

==========================

乔瑟夫几乎不记得自己是怎么回到船舱的。他脱掉厚重的防护服,穿着被汗湿透的背心,爬进了控制室。

风暴还没有过去,他不能启动飞船。

但飞船太小了。而且在他进入以前就被撞坏了不少。他清楚地看到控制舱前段的闸门被撞开了,里面散发出烧焦的味道。

而更可怕的事发生了。

就在风暴几乎要停止的时候,他看见刚刚在修理中的搁浅船只朝他这边撞了过来。

发生了什么事?

风暴不过是宇宙乱流造成的,也是由于引力的作用,也许是几千光年以外的彗星尾巴扫过一堆漂浮在宇宙中的物质,然后他们就收下这速度,从远处袭来。

那么停泊的飞船又是为什么被推动的呢?

乔瑟夫知道自己得不到答案,而且情况已经不容他思考了。

他转过头去,却看见西撒的脸,他伸出手敲打了一下舷窗。

乔瑟夫睁大了眼睛,眼眶里瞬间盈满了泪水。

================================

【西撒,我对你把老底都掏完啦,你都不怎么说自己的事。】

西撒扶着乔瑟夫的头,正在小心地给他滴眼药水。不知怎么他最近眼睛有些发炎的迹象。

【我的事没什么好说的呀。我大部分情况下都在太空里漂。你知道,】他滴好了一只眼睛,松了一口气【就和现在一样,什么都没有,一次要持续将近半个月。然后很多时候靠岸修整时我也不能下去,就一直在船上】

西撒是孤儿。大约曾经家庭也富裕过。他的父母都是地球上的意大利人,第一次太空游时在去木星的飞船上生下了他,后来全家都生活在木星上。其后也短暂地回过地球。

【后来他们都去世了。】

西撒背过身,把药水放回了药箱。乔瑟夫看着他的后背。

【那以后我就是个孤儿,一直在太空里漂流。在船舱上打杂。后来遇到了丽萨丽萨老师……她是我的师傅,她送给我最珍贵的礼物就是这艘船。】

他朝周围努了努嘴。

【就是这样】

【抱歉,西撒】

西撒摇了摇头。

【和别人说说总是好的。只是,】他的绿眼睛里闪烁着温柔的光。【总是不知道从何说起】

乔瑟夫拍了拍他的肩膀。

【看看星星,西撒】

西撒不理解地看着他。

【人人都是一颗小星球,逝去的亲友就是身边的暗物质。他们虽然离去,但引力仍在。感激我们的光锥曾彼此重叠,而你永远改变了我的星轨。纵使再不能相见,你仍是我所在的星系未曾分崩离析的原因。是我宇宙之网的永恒组成。】

乔瑟夫静静地说。

【西撒,这是我父母死去时,别人给我的一句话。】

西撒没有回答,他握了握乔瑟夫的手。

=======================

西撒并不在那里。

乔瑟夫看着西撒的幻影,觉得自己闻到西撒的气味,听见西撒的声音。清楚地看见他在永夜中闪烁的绿色眼睛。

身边响起轰鸣和警报声。飞船的制动系统已经全线瘫痪,再过不久,连船体内部的氧气都要消耗完了。

风暴已经接近尾声,但基站不可能这时前来增援,附近的雷达也显示周围杳无人烟。

【逃生船】西撒敲着窗户【去火星】

【你会回来吗】乔瑟夫说着毫不相干的话【回来吧】

【真想抱抱你】西撒笑了【你看起来在发抖】

乔瑟夫的脸贴在舷窗上,外面是漆黑一片。他就那么靠着,好像生死已经无所谓了一样。

然后他看见了枯萎的向日葵。

密封罐被撞碎了。向日葵被扯了出来,船舱中的氧气已经达到最低,温度也下降了。

乔瑟夫按开了开关,从控制室站了起来,拿起座位下的备用氧气罐,思考了一下,把向日葵也叼在了嘴里。

逃生舱是全自动的,他像向日葵先前那样,被闷在狭小的空间中,看着数据一路摆荡。而向日葵的罐子好歹是透明的,他却只能看着一片漆黑。

【E l’albaverra fino a me , si , arrivera anche per me. E quando verra lei mi dira. Ero giaqua, io ero gia qua(而日升会降临到我这儿,是的,它也将会为我而来。而当他来到时,他会对我说,我已经在这,我已经在这儿)】

他想起西撒曾经给他唱过的一首意大利歌,那是他父母喜爱的。他几乎不曾去过的祖国的歌。

当他受不了在太空中的飘荡时,当他在跟奶奶通过电话后忍不住哭泣时。

西撒抚着他的头,另一只手环着他,轻轻地唱给他的歌。

 

 

请你就这样抱着我,永远这样抱着我。

 

 



-------------------------------------

E L'alba Verrc --Ania

Prendimi così, prendimi così dal niente.
请你就这样带我走,一无所有的,就这样带我走。
Tienimi così, tienimi così per sempre.
请你就这样抱着我,永远这样抱着我。

Notte prendi i sogni infranti
E fanne stelle scintillanti,
黑夜,你带走破碎的梦想
并它们变成灿烂辉煌的星星,
Fammi guardare le mie rose
Arrampicarsi fino al sole,
ora che piove…
让我观看我的玫瑰花
在下雨之际,它们直向太阳延伸...

E l’alba verrà fino a me,
而日升将会临到我这儿,
si, arriverà anche per me
是的,它也将会为我而来
e quando verrà lei mi dirà:
而当它来到时,它会对我说:
“ero già qua, io ero già qua.”
“我已经在这儿,我已经在这儿。”

Fammi luce buona stella,
lungo la strada, alla finestra.
善良的星星,请给我光亮,
在道路上,在窗口旁,
Prendi questi sogni infranti
e fanne musica o silenzi,
purché siano eterni…
请带走这些破碎的梦想
将它们变成音乐,或 沉默,
以致它们成为永恒的...

E l’alba verrà fino a me,
而日升将会临到我这儿,
si, arriverà anche per me
是的,它也将会为我而来
e quando verrà lei mi dirà:
而当它来到时,它会对我说:
“ero già qua, io ero già qua.”
“我已经在这儿,我已经在这儿。”


Non vedi sono qua?
Aiutami a sognar…
你没看见我就在这儿吗?
请你帮助我幻想...

E l’alba verrà fino a me,
而日升将会临到我这儿,
si, arriverà anche per me
是的,它也将会为我而来
e quando verrà lei mi dirà:
而当它来到时,它会对我说:
“ero già qua, si ero già qua.”
“我已经在这儿,我已经在这儿。”

Prendimi così, prendimi così dal niente.
请你就这样带我走,一无所有的,就这样带我走。
Tienimi così, tienimi così per sempre.
请你就这样抱着我,永远这样抱着我。


看了那句话之后就很想写一篇科幻风的文,对于守望星星的人,一直有种特别的感情。

顺便也说点别的事情。

这篇的情节其实并不是我编的,科幻类太需要功底了我做不到。来源是一部电影,暂时不记得名字了,貌似叫[Gravity]

另外这也算是给小时候邻居的哥哥写的祭文。他是学天体物理的,今年本来该去北京读博,却在年初自己的家里自杀了。

关于他家人的痛苦和我们的震惊都不赘述了。但他绝对不是轻生和不在意他人想法的人。

现在我还收着他给我买的贝多芬的碟,他当时买给我时跟我说【不要恨别人,世界还是爱你的】

所以我想。如果这样的人要无言地放弃自己的生命,大约真是有什么难以言说的原因吧。

仰望星星的人,脚步都难免有些虚浮。是吗。

我一直有个问题想问他,不过再也没有机会了。

哥哥,当你在仰望星空时,究竟看见了什么呢。

关于浮动式标签的详细讲解

Pigwidgeon:

在前天我说过会写一篇详细的关于浮动式标签登陆框的文章,带点技术性,同时会暴露我的一些强迫症症状,废话不多说了,本来今晚已经被老罗的发布会给占用了一晚上的自习时间了。



这是上次放出的图,有一些地方做了改进,比如说字体颜色更加明亮饱满了,大家可以给出建议或者在下面的源码里自行调整。


先上HTML代码:



<!DOCTYPE html>


<html lang="en">


   <head>


      <meta charset="UTF-8" />


      <title>float input</title>


      <link rel="stylesheet" href="float-input-style.css">


   </head>


   <body>


      <form>


         <div class="float-input">


            <input type="text" name="username" id="username"/>


            <label for="username">用户名</label>


         </div>


         <div class="float-input">


            <input type="password" name="password" id="password"/>


            <label for="password">密码</label>


         </div>


      </form>


      <script src="float-input.js"></script>


  </body>


</html>



在这儿里HTML代码没有什么困难,只要是要注意代码中划下划线的粗体代码(Lofter没有语法高亮对我来说很痛苦),然后通过以下的CSS代码:



.float-input {


      width: 75%;


      position: relative;


      margin: 2em auto;


}



这里必须先为input外面的div设置相对定位relative。



.float-input label {


      position: absolute;


      left: 12px;


     top: 27%;


      color: #ccc;


      font: 1.4em thin helvetica, sans-serif;


      cursor: text;  


}



通过设置label的绝对定位absolute,配合left和top,将label中的文本放到了input文本框里面。


大家注意一下cursor: text; 这一句,是因为用户体验,如果不这么做,就会变成以下这样:



看到了吧,当鼠标移动到label内容的时候,鼠标不会从箭头变换为文本光标。


现在CSS还需要做的一样事情就是当光标出现在文本框时,如何将label变小并且从下往上弹出,这是简单的代码:



.float-input input:focus+label {


      font-size: 1em;


      top: -40%;


      -webkit-animation: changeLabel .4s;


      -moz-animation: changeLabel .4s;


      animation: changeLabel .4s;


}


@keyframes changeLabel {


      0% {


        opacity: 0;


        -webkit-transform: translateY(50%);


        -moz-transform: translateY(50%);


        transform: translateY(50%);


}


     100% {


        opacity: 1;


     }


}



在这一段里我使用了很多的CSS3的特性,有animation动画和transform转换,其实这些都是挺简单的如果大家了解过CSS3的这些新属性,我在这就不多累赘,我也可能讲不清,以防万一,我就讲个大概思路。


其实大家看GIF图的时候已经明白了一些逻辑,就是当光标在文本框中激活的时候(也就是focus时)label先消失了(opacity:0),然后在消失的这段时间它的字体大小变成了1em,同时位置变化了(top:-40%),而使用 transform: translateY(50%);就是为了让label像奥特曼一样从下往上窜出来,有兴趣大家可以把50%改成-50%,就会发现文字从上往下掉下来。


这就是一些比较关键的CSS代码,最后是javascript代码(其实就是设置了一些事件,动态添加两个类的事情),我把代码放出来,有兴趣的拿去试验试验完善一下,我就不多说了,这天也不早了。


一些缩进的问题我就不想纠结了,依次打空格实在麻烦。



(function() {


var input_username = document.getElementById("username");


var input_password = document.getElementById("password");


var username = "pigwidgeon";


var password = "123456";


input_username.addEventListener("focus", hasInput, false);


input_username.addEventListener("blur", checkInput, false);


input_password.addEventListener("focus", hasInput, false);


input_password.addEventListener("blur", checkInput, false);


input_username.addEventListener("keyup", changeFontSize, false);


input_password.addEventListener("keyup", changeFontSize, false);


/* 当input中的内容有字符串的时候,为input添加“hasInput”类 */


/* 这个类其实并没有太多的作用,就是当用户修改内容的时候,每次当光标转移的时候都会触发从下往上弹出label的效果 */


function hasInput() {


if(this.value) {


this.className = "hasInput";


}


else {


this.className = "";


}


}


/* 选择input的id来区分不同的input,然后再分析输入的内容是否和正确的内容相等,若正确,提供correctInput类,若错误,提供wrongInput类 */


function checkInput() {


if(this.id === "username") {


if(this.value) {


if(this.value === username) {


this.className = "correctInput";


}


else {


this.className = "wrongInput";


}


}


else {


this.className = "";


}


}


else if(this.id === "password"){


if(this.value) {


if(this.value === password) {


this.className = "correctInput";


}


else {


this.className = "wrongInput";


}


}


else {


this.className = "";


}


}


}


})( );



这里是完整的CSS代码:



form {


width: 33%;


min-width: 300px;


margin: 0 auto;


margin-top: 100px;


}


.float-input {


width: 75%;


position: relative;


margin: 2em auto;


}


.float-input input {


width: 100%;


border: 0px solid black;


border-bottom: 2px solid #ddd;


outline: none;


-webkit-transition: all .4s;


-moz-transition: all .4s;


transition: all .4s;


font-size: 1.7em;


padding: 1px 13px 3px;


}


.float-input label {


position: absolute;


left: 12px;


top: 27%;


color: #ccc;


font: 1.4em thin helvetica, sans-serif;


cursor: text; 


}


.float-input input:focus {


border-bottom-color: #6b6b6b;


}


.float-input input:focus+label,


.float-input .correctInput+label,


.float-input .wrongInput+label {


font-size: 1em;


top: -40%;


-webkit-animation: changeLabel .4s;


-moz-animation: changeLabel .4s;


animation: changeLabel .4s;


}


@-webkit-keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


/* 如果使用负的百分数,label文字将从上往下出现,如果是正的百分数就是从下往上 */


}


100% {


opacity: 1;


}


}


@-moz-keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


}


100% {


opacity: 1;


}


}


@keyframes changeLabel {


0% {


opacity: 0;


-webkit-transform: translateY(50%);


-moz-transform: translateY(50%);


transform: translateY(50%);


}


100% {


opacity: 1;


}


}


.float-input input:focus+label {


color: #f3d70b;


}


.float-input .correctInput+label {


color: #57f36f;


}


.float-input .wrongInput+label {


color: #fb5353;


}



“520,XXX”


这还有最后一句呐。