迈出第一步
加载动画修改
尝试修改anzhiyu主题的加载动画，动画结构修改路径：
themes\anzhiyu\layout\includes\loading\fullpage-loading.pug
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
| #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
.gear-loader
.gear-loader_overlay
.gear-loader_cogs
.gear-loader_cogs__top
.gear-top_part
.gear-top_part
.gear-top_part
.gear-top_hole
.gear-loader_cogs__left
.gear-left_part
.gear-left_part
.gear-left_part
.gear-left_hole
.gear-loader_cogs__bottom
.gear-bottom_part
.gear-bottom_part
.gear-bottom_part
.gear-bottom_hole
script.
const preloader = {
endLoading: () => {
document.getElementById('loading-box').classList.add("loaded");
},
initLoading: () => {
document.getElementById('loading-box').classList.remove("loaded")
}
}
window.addEventListener('load',()=> { preloader.endLoading() })
setTimeout(function(){preloader.endLoading();},10000)
if (!{theme.pjax && theme.pjax.enable}) {
document.addEventListener('pjax:send', () => { preloader.initLoading() })
document.addEventListener('pjax:complete', () => { preloader.endLoading() })
}
|
修改动画样式：
themes\anzhiyu\source\css_global\loading.styl
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
| if hexo-config('preloader')
#loading-box
position: fixed
z-index: 1000
width: 100vw
height: 100vh
overflow: hidden
text-align: center
&.loaded
z-index: -1000
.gear-loader
display: none
.gear-loader
height: 100%
position: relative
margin: auto
width: 400px
.gear-loader_overlay
width: 150px
height: 150px
background: transparent
box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
border-radius: 100%
z-index: -1
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
.gear-loader_cogs
z-index: -2
width: 100px
height: 100px
top: -120px !important
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
.gear-loader_cogs__top
position: relative
width: 100px
height: 100px
transform-origin: 50px 50px
-webkit-animation: rotate 10s infinite linear
animation: rotate 10s infinite linear
div
&:nth-of-type(1)
transform: rotate(30deg)
&:nth-of-type(2)
transform: rotate(60deg)
&:nth-of-type(3)
transform: rotate(90deg)
&.gear-top_part
width: 100px
border-radius: 10px
position: absolute
height: 100px
background: #f98db9
&.gear-top_hole
width: 50px
height: 50px
border-radius: 100%
background: white
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
.gear-loader_cogs__left
position: relative
width: 80px
transform: rotate(16deg)
top: 28px
transform-origin: 40px 40px
animation: rotate_left 10s 0.1s infinite reverse linear
left: -24px
height: 80px
div
&:nth-of-type(1)
transform: rotate(30deg)
&:nth-of-type(2)
transform: rotate(60deg)
&:nth-of-type(3)
transform: rotate(90deg)
&.gear-left_part
width: 80px
border-radius: 6px
position: absolute
height: 80px
background: #97ddff
&.gear-left_hole
width: 40px
height: 40px
border-radius: 100%
background: white
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
.gear-loader_cogs__bottom
position: relative
width: 60px
top: -65px
transform-origin: 30px 30px
-webkit-animation: rotate_left 10.2s 0.4s infinite linear
animation: rotate_left 10.2s 0.4s infinite linear
transform: rotate(4deg)
left: 79px
height: 60px
div
&:nth-of-type(1)
transform: rotate(30deg)
&:nth-of-type(2)
transform: rotate(60deg)
&:nth-of-type(3)
transform: rotate(90deg)
&.gear-bottom_part
width: 60px
border-radius: 5px
position: absolute
height: 60px
background: #ffcd66
&.gear-bottom_hole
width: 30px
height: 30px
border-radius: 100%
background: white
position: absolute
left: 0
right: 0
top: 0
bottom: 0
margin: auto
@-webkit-keyframes rotate
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@keyframes rotate
from
transform: rotate(0deg)
to
transform: rotate(360deg)
@-webkit-keyframes rotate_left
from
transform: rotate(16deg)
to
transform: rotate(376deg)
@keyframes rotate_left
from
transform: rotate(16deg)
to
transform: rotate(376deg)
@-webkit-keyframes rotate_right
from
transform: rotate(4deg)
to
transform: rotate(364deg)
@keyframes rotate_right
from
transform: rotate(4deg)
to
transform: rotate(364deg)
|
