-
Notifications
You must be signed in to change notification settings - Fork 0
/
陨落星
133 lines (119 loc) · 5.01 KB
/
陨落星
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
<html>
<head>
<meta charset="utf-8"></meta>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<title>陨落星</title>
<meta name="Description" content="Home Page of iissnan"></meta>
<meta name="color-scheme" content="dark light"></meta>
<script>
(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)
</script>
<link rel="stylesheet" type="text/css" href="assets/css/main.css"></link>
</head>
<body>
<div class="vi">
<h1 class="animate-slide-in-down" style="opacity: 1; top: 0px;">陨落星</h1>
<div class="quote">
<span class="quote-line quote-line-start animate-slide-in-left" style="left: 0px;"></span>
<span class="quote-icon quote-icon-start animate-slide-in-down" style="opacity: 1; top: 0px;">
<i class="icon icon-quotes-left"></i>
</span>
<p class="quote-content animate-slide-in-down" style="opacity: 1; top: 0px;">不积跬步，无以至千里。不积小流，无以成江海。</p>
<p class="quote-author animate-slide-in-down" style="opacity: 1; top: 0px;">
《劝学篇》——
<em>荀子</em>
</p>
<span class="quote-icon quote-icon-end animate-slide-in-up" style="opacity: 1; bottom: 0px;">
<i class="icon icon-quotes-right"></i>
</span>
<span class="quote-line quote-line-end animate-slide-in-right" style="right: 0px;"></span>
</div>
<div class="links">
<a href="https://wp.en.icu/" class="animate-slide-in-down" style="opacity: 1; top: 0px;">Blog</a>
<a href="https://wp.en.icu/index.php/note/" class="animate-slide-in-down" style="opacity: 1; top: 0px;">Moments</a>
<a href="https://alist.en.icu/" class="animate-slide-in-down" style="opacity: 1; top: 0px;">Alist</a>
<a href="https://qiu.icu" class="animate-slide-in-down" style="opacity: 1; top: 0px;">Nav</a>
</div>
<div class="location">
<span class="location-icon animate-slide-in-up" style="opacity: 1; bottom: 0px;">
<i class="icon icon-map-pin"></i>
</span>
<span class="location-text animate-slide-in-down" style="opacity: 1; top: 0px;">ZheJiang - China 浙ICP备2021004450号-4</span>
</div>
<div class="relocating">
Navigating to:
<span class="relocate-location"></span>
...
</div>
</div>
<script src="assets/vendors/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
var SLIDE_IN_LEFT = { left: 0 };
var SLIDE_IN_RIGHT = { right: 0 };
registerCheatCode();
executeAnimations();
function executeAnimations() {
$.when()
.then(animateTitle)
.then(animateQuote)
.then(animateLinks)
.then(animateLocation);
}
function animateTitle() {
return animate('h1', SLIDE_IN_DOWN);
}
function animateQuote() {
return $.when(
animate('.quote-line-start', SLIDE_IN_LEFT),
animate('.quote-line-end',SLIDE_IN_RIGHT),
animate('.quote-icon-start', SLIDE_IN_DOWN),
animate('.quote-icon-end', SLIDE_IN_UP)
)
.then(function () {
return animate('.quote-content', SLIDE_IN_DOWN);
})
.then(function () {
return animate('.quote-author', SLIDE_IN_DOWN);
});
}
function animateLinks() {
var DELAY_STEP = 200;
var elements = $('.links a');
var concurrent = $.makeArray(elements)
.map(function (element, index) {
return animate(element, SLIDE_IN_DOWN, index * DELAY_STEP);
});
return $.when.apply($, concurrent);
}
function animateLocation() {
return $.when(
animate('.location-icon', SLIDE_IN_UP),
animate('.location-text', SLIDE_IN_DOWN)
);
}
function animate(selector, properties, delay, options) {
delay = delay || 0;
return $(selector).delay(delay)
.animate(properties, options)
.promise();
}
function registerCheatCode() {
$(document.body).on('keydown', function (event) {
var KEY_B = 66;
if (event.which === KEY_B) {
$('.relocate-location').text('Bookmark Page');
$('.relocating').css('opacity', 1);
window.setTimeout(function () {
window.location.href = '/bookmarks.html';
}, 1000);
}
});
}
});
</script>
</body>
</html>