-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
619 lines (524 loc) · 26.1 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
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="author" content="Flexiston">
<meta name="generator" content="KodCloud">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="description" content="Flesxの网页实验室用于陈列一些收集的一些网页特效，以及其它的好玩的内容">
<meta name="keywords" content="Flesx,Flexiston,Flesx网页实验室,Flesx实验室,Flexiston's Blog,Flesx博客">
<title>Flesxの网页实验室</title>
<!-- 不支持IE8及以下版本浏览器 -->
<!--[if lte IE 8]>
<script>
alert("珍爱生命，远离低版本 IE！");
window.location.href="http://lab.mkblog.cn/music/plugns/killie/"
</script>
<![endif]-->
<!-- font-awesome 图标字体 -->
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" media="screen"
rel="stylesheet" type="text/css">
<!-- 实验室核心样式文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Flexiston/lab/index/css/index.css">
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/Flexiston/CDN/favicon.ico">
<!-- 百度统计 -->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?09a78278c936e83a2dd13ac95d5898c0";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<header class="header">
<!-- 动画展示区域 -->
<div id="victor-container">
<div id="victor-output"></div>
</div>
<div class="welcome">
<p>— 欢迎访问 —</p>
<img class="web-title" src="https://cdn.jsdelivr.net/gh/Flexiston/lab/index/img/logo.png" alt="Flesxの网页实验室" draggable="false"
onerror="onerror=null;src='index/img/web_title.png'">
</div>
<!--向下滚动提示-->
<a class="scroll-down-tips" href="index.html#duang"
onclick="$('html, body').animate({scrollTop: $('.header').height()}, '500');return false;">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
向下滚动
</a>
</header> <!-- header -->
<div class="container">
<section class="section">
<a name="duang"></a>
<h3 class="mk-sub-title">
<span>Duang</span>
<span>/</span>
网页特效
</h3>
<p class="mk-title-describe">一些好玩的东东（全是扒的-0-）</p>
<div class="mk-item-box">
<div class="mk-item">
<a href="https://lab.flesx.cn/badapple/" target="_blank">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="fas fa-apple-alt" aria-hidden="true"></i>
</div>
<h3>Bad Apple</h3>
<p>苹果好吃吗？</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/baidu/" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
<h3>Lmbtfy</h3>
<p>不会百度？让我帮你百度一下</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/scare/" target="_blank">
<article class="mk-color-item color4">
<div class="item-logo">
<i class="fab fa-snapchat-ghost" aria-hidden="true"></i>
</div>
<h3>Scare</h3>
<p>CSS3 害怕高清 3D 重置</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/waves/" target="_blank">
<article class="mk-color-item" style="background-color:#fe9349!important;">
<div class="item-logo">
<i class="fas fa-globe-asia" aria-hidden="true"></i>
</div>
<h3>Ocean Wave Simulation</h3>
<p>3D 海浪模型</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/sys/" target="_blank">
<article class="mk-color-item" style="background-color:#00c4b6!important;">
<div class="item-logo">
<i class="fab fa-unity" aria-hidden="true"></i>
</div>
<h3>3D 太阳系</h3>
<p>浏览太阳系</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/mikutap/" target="_blank">
<article class="mk-color-item color5">
<div class="item-logo">
<i class="fas fa-music" aria-hidden="true"></i>
</div>
<h3>Mikutap</h3>
<p>来听听初音的声音吧~</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/hack/" target="_blank">
<article class="mk-color-item" style="background-color:#734ae6!important;">
<div class="item-logo">
<i class="fas fa-bug" aria-hidden="true"></i>
</div>
<h3>Hacker</h3>
<p>震惊！你电脑被黑了</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/moefood/" target="_blank">
<article class="mk-color-item color6">
<div class="item-logo">
<i class="fas fa-utensils" aria-hidden="true"></i>
</div>
<h3>MoeFood</h3>
<p>感觉萌萌哒</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/visualization/" target="_blank">
<article class="mk-color-item color4">
<div class="item-logo">
<i class="far fa-file-audio" aria-hidden="true"></i>
</div>
<h3>HTML5Audio</h3>
<p>开大你的音响，感受 H5 魅力</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div> <!-- mk-item-box -->
<h3 class="mk-sub-title">
<span>Game</span>
<span>/</span>
游戏
</h3>
<p class="mk-title-describe">玩会游戏，放松一下（</p>
<div class="mk-item-box">
<div class="mk-item">
<a href="https://blog.flesx.cn/catchcat/" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fas fa-cat" aria-hidden="true"></i>
</div>
<h3>一起圈小猫猫</h3>
<p>小猫跑啦！</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/adarkroom/" target="_blank">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="fas fa-home" aria-hidden="true"></i>
</div>
<h3>ADarkRoom</h3>
<p>一款有趣的文字游戏</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://blog.flesx.cn/runner/" target="_blank">
<article class="mk-color-item color3">
<div class="item-logo">
<i class="fas fa-cube" aria-hidden="true"></i>
</div>
<h3>小方块跑酷</h3>
<p>一个没有终点的超简单游戏</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://blog.flesx.cn/map/" target="_blank">
<article class="mk-color-item color4">
<div class="item-logo">
<i class="fas fa-map" aria-hidden="true"></i>
</div>
<h3>一起闯关</h3>
<p>简单的迷宫游戏</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/dino/" target="_blank">
<article class="mk-color-item" style="background-color:#0a73ff!important;">
<div class="item-logo">
<i class="fas fa-dragon" aria-hidden="true"></i>
</div>
<h3>Dinosaur</h3>
<p>恐龙快跑</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/td/" target="_blank">
<article class="mk-color-item color6">
<div class="item-logo">
<i class="fas fa-gopuram" aria-hidden="true"></i>
</div>
<h3>HTML5 塔防</h3>
<p>又是一款人生游戏</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item" style="display: none">
<a href="javascript:;" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fa fa-circle-thin" aria-hidden="true"></i>
</div>
<h3>...</h3>
<p>敬请期待</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div> <!-- mk-item-box -->
<h3 class="mk-sub-title">
<span>More</span>
<span>/</span>
其它
</h3>
<p class="mk-title-describe">其余一些好玩的</p>
<div class="mk-item-box">
<div class="mk-item">
<a href="https://lab.flesx.cn/webos/" target="_blank">
<article class="mk-color-item color4">
<div class="item-logo">
<i class="fas fa-desktop" aria-hidden="true"></i>
</div>
<h3>Web OS</h3>
<p>在线桌面</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/clock/" target="_blank">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="far fa-clock" aria-hidden="true"></i>
</div>
<h3>电子表</h3>
<p>一款可爱的自带倒计时的表</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://lab.flesx.cn/click/" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fas fa-mouse-pointer" aria-hidden="true"></i>
</div>
<h3>Click</h3>
<p>你为什么总是点我！</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://box.flesx.cn" target="_blank">
<article class="mk-color-item color3">
<div class="item-logo">
<i class="fas fa-box" aria-hidden="true"></i>
</div>
<h3>百宝箱</h3>
<p>一个 Hexo 生成的网址导航</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://nav.flesx.cn" target="_blank">
<article class="mk-color-item color5">
<div class="item-logo">
<i class="fas fa-route" aria-hidden="true"></i>
</div>
<h3>导航页</h3>
<p>又一个简洁的网址导航<del>（建议设置成浏览器主页哦 [#手动滑稽]</del></p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://so.flesx.cn" target="_blank">
<article class="mk-color-item color6">
<div class="item-logo">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
<h3>简单搜索</h3>
<p>又一个简洁的搜索页面</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div> <!-- mk-item-box -->
<a name="links"></a>
<h3 class="mk-sub-title">
<span>Links</span>
<span>/</span>
外链工具
</h3>
<p class="mk-title-describe">这些均是本站外的好用工具</p>
<div class="mk-item-box">
<div class="mk-item">
<a href="https://earth.nullschool.net" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="fas fa-globe" aria-hidden="true"></i>
</div>
<h3>全球天气可视化</h3>
<p>一款让你大吃一惊的全球天气仪</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="http://bigjpg.com/" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color5">
<div class="item-logo">
<i class="fas fa-arrows-alt" aria-hidden="true"></i>
</div>
<h3>Bigjpg</h3>
<p>你的图片不够大？</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="http://ip8.speedtestcustom.com" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fas fa-tachometer-alt" aria-hidden="true"></i>
</div>
<h3>无广告Speedtest</h3>
<p>.net 和 .cn 的广告看着烦?</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://www.cssportal.com/" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color6">
<div class="item-logo">
<i class="fas fa-code" aria-hidden="true"></i>
</div>
<h3>CSS Portal</h3>
<p>CSS 文档</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://yamlvalidator.com/" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color4">
<div class="item-logo">
<i class="fas fa-check-circle" aria-hidden="true"></i>
</div>
<h3>YAML Validator</h3>
<p>在线 YAML 校正器</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="https://ps.gaoding.com/" target="_blank" rel="external nofollow noopener noreferrer">
<article class="mk-color-item color3">
<div class="item-logo">
<i class="fas fa-camera-retro" aria-hidden="true"></i>
</div>
<h3>在线 PS</h3>
<p>稿定设计 × Photopea</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div>
</section> <!-- class="section" -->
<section class="section">
<!-- class="section" -->
<div class="mk-big-title">
<h4>About</h4>
</div>
<div class="about-content">
<p>Flesxの网页实验室用来陈列一些新鲜、好玩的 Html 作品</p>
<p>本页面展示部分使用 <a href="http://lab.mkblog.cn/">孟坤Web实验室</a> 仿 AlloyTeam 的样式</p>
<!--
（本页面的代码可以随意拿去用，但转载或使用时请注明来自 http://lab.mkblog.cn，谢谢！）
-->
<p>欲了解更多内容，请访问我的 <a href="https://blog.flesx.cn" target="_blank">个人博客</a></p>
</div>
</section>
</div> <!-- class=container -->
<footer class="footer">
<div class="social">
<a href="https://github.com/Flexiston" target="_blank" title="Github" mkpop="求 Follow，求 Star!">
<i class="fab fa-github" aria-hidden="true"></i>
</a>
</div>
<div class="count">
<span id="busuanzi_container_site_pv">『您是本站第 <span id="busuanzi_value_site_pv"><i
class="fas fa-spinner fa-spin"></i></span> 位访客』</span>
</div>
<div class="web-record">
<p class="footer-copyright">Copyright<i class="far fa-copyright fa-fw copy-icon"></i> 2020 Flexiston · <a href="https://icp.gov.moe/?keyword=202023333" target="_blank" style="color:inherit" rel="external nofollow noopener noreferrer">萌ICP备202023333号</a></p>
</div>
</footer>
<!-- 返回顶部 -->
<div class="mk-uptop" title="点击返回顶部"></div>
<!-- jq -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/Flexiston/lab/index/js/vector.js"></script>
<script>
$(function () {
// 页面加载完毕后固定页头高度，防止在某些自动隐藏工具栏的移动浏览器上出现页面抖动现象
$(".header").height($(window).height());
// 初始化 传入dom id
var victor = new Victor("victor-container", "victor-output");
var theme = [
["#002c4a", "#005584"],
["#35ac03", "#3f4303"],
["#ac0908", "#cd5726"],
["#18bbff", "#00486b"]
];
var color = theme[fRandomBy(0, 3)];
victor(color).set();
// 监听滚动变化
$(window).scroll(function () {
if ($(window).scrollTop() < 300) {
$(".mk-uptop").removeClass("show");
} else {
$(".mk-uptop").addClass("show");
}
});
// 返回顶部
$(".mk-uptop").click(function () {
$("html, body").animate({
scrollTop: 0
}, "normal");
return false;
});
// 烦人的 CNZZ，输出一大堆错误信息、、清除掉！
// console.clear();
console.log('%cFlesx Web 实验室',
'font-size: 60px;background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat; text-shadow: 5px -5px black, 4px -4px white; font-weight: bold; -webkit-text-fill-color: transparent; -webkit-background-clip: text;'
);
console.info('Version 2.0, Designed by mkblog.cn.');
console.error('版权所有 mkblog.cn，盗作者代码还不留原始版权的人是小狗！→_→');
});
/*******************************
* 函数名：生成指定范围的随机数
* 输入： (under)下限 (over)上限
* 输出： 所需要的数值
*******************************/
function fRandomBy(under, over) {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * under + 1);
case 2:
return parseInt(Math.random() * (over - under + 1) + under);
default:
return 0;
}
}
</script>
<!--
孟坤网页实验室 v2.0
更新时间: 2017-8-29
-->
<style>
</style>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</body>
</html>