Skip to content

Commit 40cd50a

Browse files
lzxblzxb
committed
优化启动图
1 parent 249222a commit 40cd50a

File tree

3 files changed

+459
-88
lines changed

3 files changed

+459
-88
lines changed

‎index.html

+169-44
Original file line numberDiff line numberDiff line change
@@ -37,22 +37,21 @@
3737
margin: auto;
3838
display: -webkit-box;
3939
display: -webkit-flex;
40-
display: -ms-flexbox;
4140
display: -moz-box;
41+
display: -ms-flexbox;
4242
display: flex;
4343
-webkit-box-align: center;
4444
-webkit-align-items: center;
45-
-ms-flex-align: center;
46-
-ms-grid-row-align: center;
4745
-moz-box-align: center;
46+
-ms-flex-align: center;
4847
align-items: center;
4948
-webkit-box-pack: center;
5049
-webkit-justify-content: center;
51-
-ms-flex-pack: center;
5250
-moz-box-pack: center;
51+
-ms-flex-pack: center;
5352
justify-content: center;
5453
-webkit-transition: all 0.3s;
55-
-ms-transition: all 0.3s;
54+
-o-transition: all 0.3s;
5655
-moz-transition: all 0.3s;
5756
transition: all 0.3s;
5857
background: #80bd01;
@@ -71,63 +70,189 @@
7170
color: #fff;
7271
}
7372

74-
.app-loading .svg {
75-
margin: 0 auto;
73+
@-webkit-keyframes line-spin-fade-loader {
74+
50% {
75+
opacity: 0.3;
76+
}
77+
100% {
78+
opacity: 1;
79+
}
7680
}
7781

78-
.app-loading h2 {
79-
margin-top: 50px;
80-
line-height: 70px;
81-
font-size: 40px;
82+
@-moz-keyframes line-spin-fade-loader {
83+
50% {
84+
opacity: 0.3;
85+
}
86+
100% {
87+
opacity: 1;
88+
}
8289
}
8390

84-
@-webkit-keyframes fadeIn {
85-
0% {
86-
opacity: 0;
87-
/*初始状态 透明度为0*/
91+
@-o-keyframes line-spin-fade-loader {
92+
50% {
93+
opacity: 0.3;
8894
}
95+
100% {
96+
opacity: 1;
97+
}
98+
}
99+
100+
@keyframes line-spin-fade-loader {
89101
50% {
90-
opacity: 0;
91-
/*中间状态 透明度为0*/
102+
opacity: 0.3;
92103
}
93104
100% {
94105
opacity: 1;
95-
/*结尾状态 透明度为1*/
96106
}
97107
}
108+
109+
.app-loading .line-spin-fade-loader {
110+
position: relative;
111+
width: 0;
112+
margin: 0 auto;
113+
}
114+
115+
.app-loading .line-spin-fade-loader > div:nth-child(1) {
116+
top: 20px;
117+
left: 0;
118+
-webkit-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
119+
-moz-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
120+
-o-animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
121+
animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
122+
}
123+
124+
.app-loading .line-spin-fade-loader > div:nth-child(2) {
125+
top: 13.63636px;
126+
left: 13.63636px;
127+
-webkit-transform: rotate(-45deg);
128+
-moz-transform: rotate(-45deg);
129+
-ms-transform: rotate(-45deg);
130+
-o-transform: rotate(-45deg);
131+
transform: rotate(-45deg);
132+
-webkit-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
133+
-moz-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
134+
-o-animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
135+
animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
136+
}
137+
138+
.app-loading .line-spin-fade-loader > div:nth-child(3) {
139+
top: 0;
140+
left: 20px;
141+
-webkit-transform: rotate(90deg);
142+
-moz-transform: rotate(90deg);
143+
-ms-transform: rotate(90deg);
144+
-o-transform: rotate(90deg);
145+
transform: rotate(90deg);
146+
-webkit-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
147+
-moz-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
148+
-o-animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
149+
animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
150+
}
151+
152+
.app-loading .line-spin-fade-loader > div:nth-child(4) {
153+
top: -13.63636px;
154+
left: 13.63636px;
155+
-webkit-transform: rotate(45deg);
156+
-moz-transform: rotate(45deg);
157+
-ms-transform: rotate(45deg);
158+
-o-transform: rotate(45deg);
159+
transform: rotate(45deg);
160+
-webkit-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
161+
-moz-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
162+
-o-animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
163+
animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
164+
}
165+
166+
.app-loading .line-spin-fade-loader > div:nth-child(5) {
167+
top: -20px;
168+
left: 0;
169+
-webkit-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
170+
-moz-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
171+
-o-animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
172+
animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
173+
}
174+
175+
.app-loading .line-spin-fade-loader > div:nth-child(6) {
176+
top: -13.63636px;
177+
left: -13.63636px;
178+
-webkit-transform: rotate(-45deg);
179+
-moz-transform: rotate(-45deg);
180+
-ms-transform: rotate(-45deg);
181+
-o-transform: rotate(-45deg);
182+
transform: rotate(-45deg);
183+
-webkit-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
184+
-moz-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
185+
-o-animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
186+
animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
187+
}
188+
189+
.app-loading .line-spin-fade-loader > div:nth-child(7) {
190+
top: 0;
191+
left: -20px;
192+
-webkit-transform: rotate(90deg);
193+
-moz-transform: rotate(90deg);
194+
-ms-transform: rotate(90deg);
195+
-o-transform: rotate(90deg);
196+
transform: rotate(90deg);
197+
-webkit-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
198+
-moz-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
199+
-o-animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
200+
animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
201+
}
202+
203+
.app-loading .line-spin-fade-loader > div:nth-child(8) {
204+
top: 13.63636px;
205+
left: -13.63636px;
206+
-webkit-transform: rotate(45deg);
207+
-moz-transform: rotate(45deg);
208+
-ms-transform: rotate(45deg);
209+
-o-transform: rotate(45deg);
210+
transform: rotate(45deg);
211+
-webkit-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
212+
-moz-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
213+
-o-animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
214+
animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
215+
}
216+
217+
.app-loading .line-spin-fade-loader > div {
218+
background-color: #fff;
219+
width: 4px;
220+
height: 35px;
221+
-webkit-border-radius: 2px;
222+
-moz-border-radius: 2px;
223+
border-radius: 2px;
224+
margin: 2px;
225+
-webkit-animation-fill-mode: both;
226+
-moz-animation-fill-mode: both;
227+
-o-animation-fill-mode: both;
228+
animation-fill-mode: both;
229+
position: absolute;
230+
width: 5px;
231+
height: 15px;
232+
}
233+
234+
.app-loading h2 {
235+
margin-top: 50px;
236+
line-height: 70px;
237+
font-size: 40px;
238+
}
98239
</style>
99240
</head>
100241

101242
<body>
102243
<!-- loading start -->
103244
<div class="app-loading">
104245
<div class="box">
105-
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="60" height="60" fill="white">
106-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(0 16 16)">
107-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0" />
108-
</path>
109-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(45 16 16)">
110-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.125s" />
111-
</path>
112-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(90 16 16)">
113-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.25s" />
114-
</path>
115-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(135 16 16)">
116-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.375s" />
117-
</path>
118-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(180 16 16)">
119-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.5s" />
120-
</path>
121-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(225 16 16)">
122-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.675s" />
123-
</path>
124-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(270 16 16)">
125-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.75s" />
126-
</path>
127-
<path opacity=".1" d="M14 0 H18 V8 H14 z" transform="rotate(315 16 16)">
128-
<animate attributeName="opacity" from="1" to=".1" dur="1s" repeatCount="indefinite" begin="0.875s" />
129-
</path>
130-
</svg>
246+
<div class="line-spin-fade-loader">
247+
<div></div>
248+
<div></div>
249+
<div></div>
250+
<div></div>
251+
<div></div>
252+
<div></div>
253+
<div></div>
254+
<div></div>
255+
</div>
131256
<h2>vue-cnode</h2>
132257
<p>致力于 Node.js 的技术研究</p>
133258
</div>

‎src/css/common.css

+121
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,124 @@
1+
html {
2+
background: #333;
3+
}
4+
5+
.app-loading {
6+
position: fixed;
7+
top: 0;
8+
right: 0;
9+
bottom: 0;
10+
left: 0;
11+
z-index: 9999;
12+
max-width: 640px;
13+
margin: auto;
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
transition: all 0.3s;
18+
background: #80bd01;
19+
}
20+
21+
.app-loading-hide {
22+
left: 120%;
23+
bottom: 120%;
24+
opacity: 0;
25+
}
26+
27+
.app-loading .box {
28+
width: 400px;
29+
height: 300px;
30+
text-align: center;
31+
color: #fff;
32+
}
33+
34+
@keyframes line-spin-fade-loader {
35+
50% {
36+
opacity: 0.3;
37+
}
38+
100% {
39+
opacity: 1;
40+
}
41+
}
42+
43+
.app-loading .line-spin-fade-loader {
44+
position: relative;
45+
width: 0;
46+
margin: 0 auto;
47+
}
48+
49+
.app-loading .line-spin-fade-loader > div:nth-child(1) {
50+
top: 20px;
51+
left: 0;
52+
animation: line-spin-fade-loader 1.2s 0.12s infinite ease-in-out;
53+
}
54+
55+
.app-loading .line-spin-fade-loader > div:nth-child(2) {
56+
top: 13.63636px;
57+
left: 13.63636px;
58+
transform: rotate(-45deg);
59+
animation: line-spin-fade-loader 1.2s 0.24s infinite ease-in-out;
60+
}
61+
62+
.app-loading .line-spin-fade-loader > div:nth-child(3) {
63+
top: 0;
64+
left: 20px;
65+
transform: rotate(90deg);
66+
animation: line-spin-fade-loader 1.2s 0.36s infinite ease-in-out;
67+
}
68+
69+
.app-loading .line-spin-fade-loader > div:nth-child(4) {
70+
top: -13.63636px;
71+
left: 13.63636px;
72+
transform: rotate(45deg);
73+
animation: line-spin-fade-loader 1.2s 0.48s infinite ease-in-out;
74+
}
75+
76+
.app-loading .line-spin-fade-loader > div:nth-child(5) {
77+
top: -20px;
78+
left: 0;
79+
animation: line-spin-fade-loader 1.2s 0.6s infinite ease-in-out;
80+
}
81+
82+
.app-loading .line-spin-fade-loader > div:nth-child(6) {
83+
top: -13.63636px;
84+
left: -13.63636px;
85+
transform: rotate(-45deg);
86+
animation: line-spin-fade-loader 1.2s 0.72s infinite ease-in-out;
87+
}
88+
89+
.app-loading .line-spin-fade-loader > div:nth-child(7) {
90+
top: 0;
91+
left: -20px;
92+
transform: rotate(90deg);
93+
animation: line-spin-fade-loader 1.2s 0.84s infinite ease-in-out;
94+
}
95+
96+
.app-loading .line-spin-fade-loader > div:nth-child(8) {
97+
top: 13.63636px;
98+
left: -13.63636px;
99+
transform: rotate(45deg);
100+
animation: line-spin-fade-loader 1.2s 0.96s infinite ease-in-out;
101+
}
102+
103+
.app-loading .line-spin-fade-loader > div {
104+
background-color: #fff;
105+
width: 4px;
106+
height: 35px;
107+
border-radius: 2px;
108+
margin: 2px;
109+
animation-fill-mode: both;
110+
position: absolute;
111+
width: 5px;
112+
height: 15px;
113+
}
114+
115+
.app-loading h2 {
116+
margin-top: 50px;
117+
line-height: 70px;
118+
font-size: 40px;
119+
}
120+
121+
1122
.common-toast {
2123
position: absolute;
3124
top: 50%;

0 commit comments

Comments
 (0)