JSDM

HTML

 
1
<div class="spinner">
2
    <div class="main-dot">
3
        <svg width="50" height="50">
4
            <g id="cube">
5
                <polygon fill="#C2C2C2" points="46.612,12.522 25,0.044 3.388,12.522 25,25"/>
6
                <polygon fill="#B5B5B5" points="46.612,37.478 46.612,12.522 25,25 25,49.956"/>
7
                <polygon fill="#ADADAD" points="25,49.956 25,25 3.388,12.522 3.388,37.478"/>
8
            </g>
9
        </svg>
10
    </div>
11
    <div class="small-dot 1"></div>
12
    <div class="small-dot 2"></div>
13
    <div class="small-dot 3"></div>
14
    <div class="small-dot 4"></div>
15
</div>
!

CSS

​x
 
1
.spinner {
2
    width: 96px;
3
    height: 96px;
4
    left: 50%;
5
    top: 50%;
6
    margin: -48px 0px 0px -48px;
7
    position: absolute;
8
    perspective: 70px;
9
    transform-style: preserve-3d;
10
}
11
@keyframes bounce-in {
12
    0% {
13
        transform: translate3d(0px, 0px, 0px) scale(0);
14
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
15
    }
16
    37% {
17
        transform: translate3d(0px, 0px, 0px) scale(1.5);
18
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
19
    }
20
    56% {
21
        transform: translate3d(0px, 0px, 0px) scale(0.8);
22
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
23
    }
24
    73% {
25
        transform: translate3d(0px, 0px, 0px) scale(1.2);
26
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
27
    }
28
    83% {
29
        transform: translate3d(0px, 0px, 0px) scale(0.9);
30
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
31
    }
32
    90% {
33
        transform: translate3d(0px, 0px, 0px) scale(1.1);
34
        animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
35
    }
36
    95% {
37
        transform: translate3d(0px, 0px, 0px) scale(0.9);
38
        animation-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
39
    }
40
    100% {
41
        transform: translate3d(0px, 0px, 0px) scale(1.0);
42
    }
43
}
44
.spinner .main-dot {
45
    width: 50px;
46
    height: 50px;
47
    left: 48px;
48
    top: 48px;
49
    margin: -25px 0px 0px -25px;
50
    position: absolute;
51
    transform: scale(0);
52
    animation-delay: 0.5s;
53
    animation-duration: 0.9s;
54
    animation-fill-mode: forwards;
55
    animation-name: bounce-in;
56
}
57
.spinner .small-dot {
58
    width: 20px;
59
    height: 20px;
60
    left: 48px;
61
    top: 48px;
62
    margin: -10px 0px 0px -10px;
63
    position: absolute;
64
    border-radius: 10px;
65
    opacity: 0;
66
    animation-duration: 2s;
67
    animation-fill-mode: forwards;
68
    animation-iteration-count: infinite;
69
    animation-timing-function: linear;
70
}
71
@keyframes circle-1 {
72
    0% {
73
        opacity: 0;
74
        transform: translate3d(13.89px, -14.98px, -34.39px) scale(0.35);
75
    }
76
    3% {
77
        opacity: 1;
78
        transform: translate3d(14.38px, -15.47px, -33.97px) scale(0.35);
79
    }
80
    6% {
81
        transform: translate3d(15.78px, -16.91px, -32.64px) scale(0.35);
82
    }
83
    9% {
84
        transform: translate3d(17.97px, -19.18px, -30.15px) scale(0.35);
85
    }
86
    12% {
87
        transform: translate3d(20.67px, -22.08px, -26.17px) scale(0.35);
88
    }
89
    15% {
90
        transform: translate3d(23.46px, -25.24px, -20.31px) scale(0.35);
91
    }
92
    18% {
93
        transform: translate3d(25.68px, -28.10px, -12.28px) scale(0.35);
94
    }
95
    21% {
96
        transform: translate3d(26.52px, -29.88px, -2.07px) scale(0.35);
97
    }
98
    24% {
99
        transform: translate3d(25.01px, -29.64px, 9.81px) scale(0.35);
100
    }
101
    27% {
102
        transform: translate3d(20.30px, -26.43px, 22.12px) scale(0.35);
103
    }
104
    30% {
105
        transform: translate3d(11.99px, -19.57px, 32.76px) scale(0.35);
106
    }
107
    33% {
108
        transform: translate3d(0.56px, -9.06px, 38.96px) scale(0.35);
109
    }
110
    36% {
111
        transform: translate3d(-12.25px, 3.93px, 37.87px) scale(0.35);
112
    }
113
    39% {
114
        transform: translate3d(-23.21px, 16.62px, 28.02px) scale(0.35);
115
    }
116
    42% {
117
        transform: translate3d(-28.79px, 24.74px, 12.62px) scale(0.35);
118
    }
119
    45% {
120
        transform: translate3d(-28.92px, 27.36px, -3.90px) scale(0.35);
121
    }
122
    48% {
123
        transform: translate3d(-24.92px, 25.32px, -18.37px) scale(0.35);
124
    }
125
    51% {
126
        transform: translate3d(-18.48px, 20.19px, -29.17px) scale(0.35);
127
    }
128
    54% {
129
        transform: translate3d(-11.12px, 13.56px, -35.95px) scale(0.35);
130
    }
131
    57% {
132
        transform: translate3d(-3.98px, 6.72px, -39.23px) scale(0.35);
133
    }
134
    60% {
135
        transform: translate3d(2.27px, 0.53px, -39.93px) scale(0.35);
136
    }
137
    63% {
138
        transform: translate3d(7.31px, -4.57px, -39.06px) scale(0.35);
139
    }
140
    66% {
141
        transform: translate3d(11.09px, -8.43px, -37.50px) scale(0.35);
142
    }
143
    69% {
144
        transform: translate3d(13.68px, -11.07px, -35.92px) scale(0.35);
145
    }
146
    72% {
147
        transform: translate3d(15.18px, -12.59px, -34.80px) scale(0.35);
148
    }
149
    75% {
150
        transform: translate3d(15.67px, -13.09px, -34.40px) scale(0.35);
151
    }
152
    100% {
153
        transform: translate3d(13.89px, -14.98px, -34.39px) scale(0.35);
154
    }
155
}
156
​
157
@keyframes circle-2 {
158
    0% {
159
        opacity: 0;
160
        transform: translate3d(5.06px, -5.10px, -39.35px) scale(0.35);
161
    }
162
    3% {
163
        opacity: 1;
164
        transform: translate3d(5.62px, -5.66px, -39.20px) scale(0.35);
165
    }
166
    6% {
167
        transform: translate3d(7.27px, -7.33px, -38.64px) scale(0.35);
168
    }
169
    9% {
170
        transform: translate3d(9.96px, -10.05px, -37.41px) scale(0.35);
171
    }
172
    12% {
173
        transform: translate3d(13.51px, -13.72px, -35.06px) scale(0.35);
174
    }
175
    15% {
176
        transform: translate3d(17.61px, -18.08px, -31.03px) scale(0.35);
177
    }
178
    18% {
179
        transform: translate3d(21.73px, -22.70px, -24.75px) scale(0.35);
180
    }
181
    21% {
182
        transform: translate3d(25.07px, -26.86px, -15.82px) scale(0.35);
183
    }
184
    24% {
185
        transform: translate3d(26.57px, -29.60px, -4.25px) scale(0.35);
186
    }
187
    27% {
188
        transform: translate3d(25.09px, -29.76px, 9.23px) scale(0.35);
189
    }
190
    30% {
191
        transform: translate3d(19.69px, -26.21px, 22.92px) scale(0.35);
192
    }
193
    33% {
194
        transform: translate3d(10.10px, -18.31px, 34.10px) scale(0.35);
195
    }
196
    36% {
197
        transform: translate3d(-2.69px, -6.39px, 39.39px) scale(0.35);
198
    }
199
    39% {
200
        transform: translate3d(-15.91px, 7.44px, 35.94px) scale(0.35);
201
    }
202
    42% {
203
        transform: translate3d(-25.23px, 18.59px, 24.85px) scale(0.35);
204
    }
205
    45% {
206
        transform: translate3d(-29.50px, 25.08px, 10.06px) scale(0.35);
207
    }
208
    48% {
209
        transform: translate3d(-29.23px, 26.85px, -4.98px) scale(0.35);
210
    }
211
    51% {
212
        transform: translate3d(-25.68px, 24.88px, -17.93px) scale(0.35);
213
    }
214
    54% {
215
        transform: translate3d(-20.28px, 20.52px, -27.71px) scale(0.35);
216
    }
217
    57% {
218
        transform: translate3d(-14.23px, 15.08px, -34.21px) scale(0.35);
219
    }
220
    60% {
221
        transform: translate3d(-8.43px, 9.57px, -37.91px) scale(0.35);
222
    }
223
    63% {
224
        transform: translate3d(-3.41px, 4.65px, -39.58px) scale(0.35);
225
    }
226
    66% {
227
        transform: translate3d(0.57px, 0.69px, -39.99px) scale(0.35);
228
    }
229
    69% {
230
        transform: translate3d(3.40px, -2.15px, -39.80px) scale(0.35);
231
    }
232
    72% {
233
        transform: translate3d(5.09px, -3.84px, -39.49px) scale(0.35);
234
    }
235
    75% {
236
        transform: translate3d(5.65px, -4.40px, -39.35px) scale(0.35);
237
    }
238
    100% {
239
        transform: translate3d(5.06px, -5.10px, -39.35px) scale(0.35);
240
    }
241
}
242
​
243
@keyframes circle-3 {
244
    0% {
245
        opacity: 0;
246
        transform: translate3d(-5.06px, 5.10px, -39.35px) scale(0.35);
247
    }
248
    3% {
249
        opacity: 1;
250
        transform: translate3d(-4.50px, 4.54px, -39.49px) scale(0.35);
251
    }
252
    6% {
253
        transform: translate3d(-2.81px, 2.86px, -39.80px) scale(0.35);
254
    }
255
    9% {
256
        transform: translate3d(0.03px, 0.02px, -40.00px) scale(0.35);
257
    }
258
    12% {
259
        transform: translate3d(3.99px, -3.95px, -39.60px) scale(0.35);
260
    }
261
    15% {
262
        transform: translate3d(8.90px, -8.97px, -37.95px) scale(0.35);
263
    }
264
    18% {
265
        transform: translate3d(14.42px, -14.78px, -34.26px) scale(0.35);
266
    }
267
    21% {
268
        transform: translate3d(19.86px, -20.82px, -27.79px) scale(0.35);
269
    }
270
    24% {
271
        transform: translate3d(24.23px, -26.23px, -18.03px) scale(0.35);
272
    }
273
    27% {
274
        transform: translate3d(26.21px, -29.78px, -5.10px) scale(0.35);
275
    }
276
    30% {
277
        transform: translate3d(24.45px, -30.06px, 9.91px) scale(0.35);
278
    }
279
    33% {
280
        transform: translate3d(17.98px, -25.82px, 24.70px) scale(0.35);
281
    }
282
    36% {
283
        transform: translate3d(6.85px, -16.52px, 35.78px) scale(0.35);
284
    }
285
    39% {
286
        transform: translate3d(-6.96px, -3.31px, 39.25px) scale(0.35);
287
    }
288
    42% {
289
        transform: translate3d(-18.87px, 9.47px, 33.97px) scale(0.35);
290
    }
291
    45% {
292
        transform: translate3d(-26.77px, 19.04px, 22.82px) scale(0.35);
293
    }
294
    48% {
295
        transform: translate3d(-30.31px, 24.44px, 9.15px) scale(0.35);
296
    }
297
    51% {
298
        transform: translate3d(-30.16px, 25.92px, -4.31px) scale(0.35);
299
    }
300
    54% {
301
        transform: translate3d(-27.42px, 24.42px, -15.86px) scale(0.35);
302
    }
303
    57% {
304
        transform: translate3d(-23.27px, 21.09px, -24.78px) scale(0.35);
305
    }
306
    60% {
307
        transform: translate3d(-18.66px, 16.98px, -31.04px) scale(0.35);
308
    }
309
    63% {
310
        transform: translate3d(-14.30px, 12.88px, -35.07px) scale(0.35);
311
    }
312
    66% {
313
        transform: translate3d(-10.64px, 9.33px, -37.41px) scale(0.35);
314
    }
315
    69% {
316
        transform: translate3d(-7.91px, 6.65px, -38.64px) scale(0.35);
317
    }
318
    72% {
319
        transform: translate3d(-6.24px, 4.99px, -39.19px) scale(0.35);
320
    }
321
    75% {
322
        transform: translate3d(-5.69px, 4.44px, -39.34px) scale(0.35);
323
    }
324
    100% {
325
        transform: translate3d(-5.06px, 5.10px, -39.35px) scale(0.35);
326
    }
327
}
328
​
329
@keyframes circle-4 {
330
    0% {
331
        opacity: 0;
332
        transform: translate3d(-13.89px, 14.98px, -34.39px) scale(0.35);
333
    }
334
    3% {
335
        opacity: 1;
336
        transform: translate3d(-13.40px, 14.49px, -34.79px) scale(0.35);
337
    }
338
    6% {
339
        transform: translate3d(-11.88px, 13.00px, -35.92px) scale(0.35);
340
    }
341
    9% {
342
        transform: translate3d(-9.24px, 10.41px, -37.50px) scale(0.35);
343
    }
344
    12% {
345
        transform: translate3d(-5.38px, 6.64px, -39.08px) scale(0.35);
346
    }
347
    15% {
348
        transform: translate3d(-0.29px, 1.60px, -39.97px) scale(0.35);
349
    }
350
    18% {
351
        transform: translate3d(5.91px, -4.65px, -39.29px) scale(0.35);
352
    }
353
    21% {
354
        transform: translate3d(12.75px, -11.79px, -36.04px) scale(0.35);
355
    }
356
    24% {
357
        transform: translate3d(19.38px, -19.15px, -29.29px) scale(0.35);
358
    }
359
    27% {
360
        transform: translate3d(24.53px, -25.60px, -18.52px) scale(0.35);
361
    }
362
    30% {
363
        transform: translate3d(26.58px, -29.62px, -4.07px) scale(0.35);
364
    }
365
    33% {
366
        transform: translate3d(23.98px, -29.50px, 12.43px) scale(0.35);
367
    }
368
    36% {
369
        transform: translate3d(15.89px, -23.95px, 27.82px) scale(0.35);
370
    }
371
    39% {
372
        transform: translate3d(3.22px, -13.01px, 37.69px) scale(0.35);
373
    }
374
    42% {
375
        transform: translate3d(-9.76px, -0.22px, 38.79px) scale(0.35);
376
    }
377
    45% {
378
        transform: translate3d(-20.25px, 11.20px, 32.63px) scale(0.35);
379
    }
380
    48% {
381
        transform: translate3d(-27.11px, 19.50px, 22.02px) scale(0.35);
382
    }
383
    51% {
384
        transform: translate3d(-30.32px, 24.20px, 9.74px) scale(0.35);
385
    }
386
    54% {
387
        transform: translate3d(-30.56px, 25.72px, -2.12px) scale(0.35);
388
    }
389
    57% {
390
        transform: translate3d(-28.79px, 24.89px, -12.31px) scale(0.35);
391
    }
392
    60% {
393
        transform: translate3d(-25.94px, 22.67px, -20.33px) scale(0.35);
394
    }
395
    63% {
396
        transform: translate3d(-22.79px, 19.89px, -26.18px) scale(0.35);
397
    }
398
    66% {
399
        transform: translate3d(-19.89px, 17.19px, -30.15px) scale(0.35);
400
    }
401
    69% {
402
        transform: translate3d(-17.62px, 15.00px, -32.63px) scale(0.35);
403
    }
404
    72% {
405
        transform: translate3d(-16.18px, 13.60px, -33.96px) scale(0.35);
406
    }
407
    75% {
408
        transform: translate3d(-15.70px, 13.11px, -34.37px) scale(0.35);
409
    }
410
    100% {
411
        transform: translate3d(-13.89px, 14.98px, -34.39px) scale(0.35);
412
    }
413
}
414
.spinner .small-dot.\31 {
415
    animation-name: circle-1;
416
    animation-delay:  2.0s;
417
    background-color: #00bfcb;
418
}
419
.spinner .small-dot.\32 {
420
    animation-name: circle-2;
421
    animation-delay: 2.06s;
422
    background-color: #02cdcb;
423
}
424
.spinner .small-dot.\33 {
425
    animation-name: circle-3;
426
    animation-delay: 2.12s;
427
    background-color: #00d6ba;
428
}
429
.spinner .small-dot.\34 {
430
    animation-name: circle-4;
431
    animation-delay: 2.18s;
432
    background-color: #00e0a3;
433
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................