-
Notifications
You must be signed in to change notification settings - Fork 27
/
Copy pathindex.html
242 lines (239 loc) · 12.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>Waterdrop</title>
<link rel="stylesheet" href="libs/css.min.css" />
</head>
<body>
<div id="canvas-box" class="canvas-box"></div>
<div id="mask" class="mask"></div>
<div id="title-box" class="title-box">
<div id="title" class="title">
<span><i>T</i></span>
<span><i>H</i></span>
<span><i>R</i></span>
<span><i>E</i></span>
<span><i>E</i></span>
<span><i> </i></span>
<span><i>B</i></span>
<span><i>O</i></span>
<span><i>D</i></span>
<span><i>Y</i></span>
<span><i> </i></span>
<span><i>W</i></span>
<span><i>A</i></span>
<span><i>T</i></span>
<span><i>E</i></span>
<span><i>R</i></span>
<span><i>D</i></span>
<span><i>R</i></span>
<span><i>O</i></span>
<span><i>P</i></span>
</div>
<div class="say">
<p>在西边的天际，正在下沉的夕阳仿佛被融化着</p>
<p>如血在云海和太空中弥漫，映出一大片壮丽的红色</p>
<p>"这是人类的落日"，叶文洁轻轻地说。</p>
</div>
<div class="use">
<div></div>
《三体》
</div>
</div>
<img id="logo" class="logo" src="./libs/imgs/logo.png" />
<div id="ship-info-box" class="ship-info-box">
<div class="ship-type pointernone">
<ul id="ship-type-ul">
<li>初始化</li>
<li>待机…</li>
<li>可以开始常规推进</li>
<li>匀速航行</li>
<li>曲率引擎准备就绪</li>
<li>跃迁</li>
</ul>
</div>
<div class="speed pointernone"><span id="speed">0</span> <i id="speed-unit">%</i></div>
<div id="ship-info-btn" class="btn" data-type="1">
<div class="btn-back"></div>
<div class="btn-word">启动</div>
<div class="line line1"></div>
<div class="line line2"></div>
</div>
<div id="control-remind" class="remind">您现在可以自由移动视角</div>
</div>
<ul class="menu" id="menu">
<li id="menu-w">
<div><div>W</div></div>
</li>
<li id="menu-m">
<div><div>S</div></div>
</li>
<li id="menu-t">
<div><div>T</div></div>
</li>
</ul>
<div id="pages-box" class="pages-box">
<div id="page-w">
<div class="page-title-box">
<div class="t"><i>W</i>ATERDROP</div>
<div class="i">公元2212年，人类捕获了来自半人马星座α星系三体文明的探测器，它被命名为水滴。</div>
</div>
<img class="logo-img" src="libs/imgs/icon-water.png" alt="waterdrop" />
<div class="words-box">
<div class="t">水滴</div>
<div class="i">由三体文明制造的小型空间穿梭机，因其外形与水滴相似而得名。全长3.5米，表面呈绝对光滑的全反射镜面。银河系在它的表面映成一片流畅的光纹，使得这滴水银看上去纯洁而唯美，它的液滴外形是那么栩栩如生，以至于观察者误以为它没有内部结构。</div>
</div>
<img class="illustration" src="libs/imgs/water2.jpg" alt="waterdrop" />
<div class="words-box">
<div class="t">强互作用力外壳</div>
<div class="i">水滴的外壳由一层仅有一个原子厚的强互作用力材料构成，其原子被压缩到紧紧相连，保持绝对静止，连自身振动都消失了。所以水滴的外表面呈绝对零度，像一面镜子一样能够反射无限远的光线。水滴在发动机开机时会产生大量的热能，且强互作用力材料因为不存在分子运动所以是完全隔热的。</div>
</div>
<div class="words-box">
<div class="t">曲率驱动</div>
<div class="i">
指一种理论上的推进系统（theoretical propulsion system），能让航天器以光速飞行。宇宙的空间并不平坦，如果把宇宙的整体想象为一张大膜，这张膜的表面是弧形的，整张膜甚至可能是一个封闭的肥皂泡。
<p />
这种技术可用于制造光速飞船，使星际旅行成为可能。<br />
</div>
</div>
<div class="foot-info">"弱小和无知不是生存的障碍，傲慢才是"</div>
</div>
<div id="page-m">
<div class="page-title-box">
<div class="t"><i>S</i>ILENT SPRING</div>
<div class="i">在中国，任何超脱飞扬的思想都会砰然坠地的</div>
<div class="i">现实的引力太沉重了</div>
</div>
<img class="logo-img" src="libs/imgs/icon-earth.png" alt="waterdrop" />
<div class="words-box">
<div class="t">寂静的春天</div>
<div class="i">
大楼顶上出现了一个娇小的身影，那个美丽的女孩子挥动着一面“四·二八”的大旗，她的出现立刻招来了一阵杂乱的枪声，“四·二八”的成员以前多次玩过这个游戏，在楼顶上站出来的人，除了挥舞旗帜外，有时还用喇叭筒喊口号或向下撒传单，每次他们都能在弹雨中全身而退，为自己挣到了崇高的荣誉。
<p />
这次出来的女孩儿显然也相信自己还有那样的幸运，她挥舞着战旗，挥动着自己燃烧的青春，敌人将在这火焰中化为灰烬，理想世界明天就会在她那沸腾的热血中诞生……她陶醉在这鲜红灿烂的梦幻中，直到被一颗步枪子弹洞穿了胸膛，十五岁少女的胸膛是那么柔嫩，那颗子弹穿过后基本上没有减速，在她身后的空中发出一声啾鸣。
<p />
年轻的红卫兵同她的旗帜一起从楼顶落下，她那轻盈的身体落得甚至比旗帜还慢，仿佛小鸟眷恋着天空。
</div>
</div>
<div class="words-box">
<div class="t">叶文洁</div>
<div class="i">
大学教授、天体物理学家、ETO统帅，人类毁灭的重要一环。
<p />
经历了文化大革命，其父坚持不肯向非理性的狂热屈服而被批斗致死，她在那个极端年代里的悲惨遭遇，使善良而温和的她对人性失去信心，人性之恶和社会愚昧丑陋的意识形态深深扎进了她的心中。对人类的彻底失望和无助让她感到只有借助外部的力量才能改变这种现实。叶文洁的一生是悲惨的，她也亲手铸造了一个悲剧。
</div>
</div>
<div class="words-box">
<div class="t">黑暗森林法则</div>
<div class="i">宇宙就是一座黑暗森林，每个文明都是带枪的猎人，像幽灵般潜行于林间，轻轻拨开挡路的树枝，竭力不让脚步发出一点儿声音，连呼吸都必须小心翼翼：他必须小心，因为林中到处都有与他一样潜行的猎人，如果他发现了别的生命，能做的只有一件事：开枪消灭之。在这片森林中，他人就是地狱，就是永恒的威胁，任何暴露自己存在的生命都将很快被消灭，这就是宇宙文明的图景，这就是对费米悖论的解释。</div>
</div>
<div class="foot-info">"这是人类的落日"</div>
</div>
<div id="page-t">
<div class="page-title-box">
<div class="t"><i>T</i>HREE BODY</div>
<div class="i">死亡是唯一一座永远亮着的灯塔，不管你向哪里航行，最终都得转向它指引的方向</div>
<div class="i">大多数人到死都没有向尘世之外瞥一眼</div>
</div>
<div class="t-box">
<img src="libs/imgs/book.jpg" alt="threebody" />
<div>《三体》</div>
<div><i>刘慈欣</i> 著</div>
</div>
<div class="words-box">
<div class="t">三体问题</div>
<div class="i">
三体是天体力学名词，由三个质点和引力作用组成的力学关系，主要是指三颗质量相似的恒星在它们所组成的独立天体系统中，这三颗恒星的运动轨迹找不到任何规律。
<p />
在一般三体问题中，每一个天体在其他两个天体的万有引力作用下的运动方程都可以表示成3个二阶的常微分方程，或6个一阶的常微分方程。因此，一般三体问题的运动方程为十八阶方程，必须得到18个积分才能得到完全解。然而，现阶段还只能得到三体问题的10个初积分，还远不能解决三体问题。
</div>
</div>
<div class="card">
<img src="libs/imgs/photo.jpg" />
<div>
<div><span>刘慈欣 · </span>中国当代科幻第一人，工程师、作家。</div>
<div>凭借《三体》3部曲荣获星云奖、雨果奖、轨迹奖最佳长篇科幻小说。脑洞大开，带你领略想象力的极限</div>
</div>
</div>
<div class="foot-info">"送你一颗星星，我将在时间的尽头等你"</div>
<div class="words-box" style="margin-top: 40px">
<img class="vcode" src="libs/imgs/up.jpg" />
<div class="i" style="margin-top: 40px">微信扫一扫上方二维码可小额赞助网站作者，你的微信昵称将出现在赞助者名单中。所获资金不会用于救助任何人类。将全部捐赠给流浪小猫小狗援助计划及自然环境保护活动(主要是阿里巴巴公益)。资金总额流向和查询会公布在下方</div>
</div>
<div class="words-box">
<div class="t">赞助者名单</div>
<ul id="names" class="z"></ul>
<div class="t tl">总金额：￥<span id="sum">0.00</span></div>
<div class="t tl">资金流向查询：<a href="https://github.com/javaLuo/water" target="_blank" />此页面地址最下面</div>
</div>
<div class="t-box">
<img class="bookall" src="libs/imgs/bookall.png" alt="waterdrop" />
<div>在线阅读：<a href="http://www.51shucheng.net/kehuan/santi" target="_blank">无忧书城 - 三体全集</a></div>
</div>
<div class="foot-info">
联系网站作者:
<a href="mailto:[email protected]" target="_blank">[email protected]</a>
</div>
</div>
</div>
<div class="close" id="close">
<div></div>
<div></div>
</div>
<div class="footer">
<div class="music">
<div id="play-btn" class="play-btn">
<i class="animePlay"></i>
<i class="animePlay"></i>
<i class="animePlay"></i>
<i class="animePlay"></i>
<i class="animePlay"></i>
</div>
<div id="next-btn" class="next-btn">
<div></div>
<div></div>
</div>
<div id="music-name" class="music-name">Fearless</div>
</div>
<div class="copyright">
copyright © E.T.0
<a href="https://blog.isluo.com" target="_blank">blog.isluo.com</a> 2018 - 2021
</div>
</div>
<audio id="audio" src="libs/music/0.mp3" preload="preload"></audio>
<script src="libs/jquery-3.3.1.min.js"></script>
<script src="libs/fastclick.js"></script>
<script src="libs/three.min.js"></script>
<!-- 相机控制 -->
<script src="libs/three/OrbitControls.js"></script>
<!-- 镜面材质 -->
<script src="libs/three/Reflector.js"></script>
<!-- 2D铭牌 -->
<script src="libs/three/CSS2DRenderer.js"></script>
<!-- 后期效果构建者 -->
<script src="libs/three/EffectComposer.js"></script>
<!-- 后期渲染器 -->
<script src="libs/three/RenderPass.js"></script>
<!-- 着色器构造器 抗锯齿着色器需要这个实例化 -->
<script src="libs/three/ShaderPass.js"></script>
<!-- 全屏4色着色器 EffectComposer后期处理器依赖 -->
<script src="libs/three/CopyShader.js"></script>
<!-- 抗锯齿着色器 必须要，不然后期渲染器什么都渲染不出来-->
<script src="libs/three/FXAAShader.js"></script>
<!-- 外边框后期特效 -->
<script src="libs/three/OutlinePass.js"></script>
<!-- 屏幕信号抖动后期特效 -->
<script src="libs/three/GlitchPass.js"></script>
<!-- RGB移位着色器 屏幕信号抖动依赖的shader -->
<script src="libs/three/DigitalGlitch.js"></script>
<!-- 线条插件 -->
<script src="libs/three/THREE.MeshLine.js"></script>
<!-- 求导算曲线 -->
<script src="libs/deri.js"></script>
<script src="libs/tween.min.js"></script>
<script src="libs/anime.min.js"></script>
<script src="libs/index.js"></script>
</body>
</html>