JSDM

HTML

3
1
<div class="wrapper">
2
<div id="preloader"></div>
3
  </div>

CSS

x
 
1
body{
2
  background:#8fe6d5;
3
}
4
.wrapper{
5
  width:50px;
6
  height:50px;
7
  position:fixed;
8
  top:50%;
9
  left:50%;
10
  margin-left:-50px;
11
  margin-top:-50px;
12
  
13
}
14
#preloader{
15
  width:50px;
16
  height:50px;
17
  border:2px solid white;
18
  border-radius:0px;
19
  -webkit-animation: preloader 4.5s infinite linear;
20
    -moz-animation: preloader 4.5s infinite linear;
21
    -ms-animation: preloader 4.5s infinite linear;
22
    animation: preloader 4.5s infinite linear;
23
}
24
#preloader:after{
25
  content:'';
26
  width:14px;
27
  height:14px;
28
  background:white;
29
  position:absolute;
30
  top:50%;
31
  left:50%;
32
  margin-left:-7px;
33
  margin-top:-7px;
34
  border-radius:20px;
35
    -webkit-animation: preloader_after 4.5s infinite linear;
36
  -moz-animation: preloader_after 4.5s infinite linear;
37
  -ms-animation: preloader_after 4.5s infinite linear;
38
  animation: preloader_after 4.5s infinite linear;
39
  -webkit-transform:scale(0);
40
}
41
42
@-webkit-keyframes preloader {
43
0%{ -webkit-transform:scale(0)}
44
10%{ -webkit-transform:scale(1.3)}
45
12%{ -webkit-transform:scale(1)}
46
15%{ -webkit-transform:scale(1.3)}
47
17%{ -webkit-transform:scale(1)}
48
25%{ -webkit-transform:scale(1)}
49
40%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
50
42%{ -webkit-transform:scale(1) rotate(180deg); border-radius:0px;}
51
44%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
52
  46%{ -webkit-transform:scale(1) rotate(180deg); border-radius:0px;}
53
    48%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
54
      50%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
55
  95%{ -webkit-transform:scale(1) rotate(180deg); border-radius:20px;}
56
        100%{ -webkit-transform:scale(0) rotate(180deg); border-radius:100px;}
57
}
58
59
@-moz-keyframes preloader {
60
0%{ -moz-transform:scale(0)}
61
10%{ -moz-transform:scale(1.3)}
62
12%{ -moz-transform:scale(1)}
63
15%{ -moz-transform:scale(1.3)}
64
17%{ -moz-transform:scale(1)}
65
25%{ -moz-transform:scale(1)}
66
40%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
67
42%{ -moz-transform:scale(1) rotate(180deg); border-radius:0px;}
68
44%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
69
  46%{ -moz-transform:scale(1) rotate(180deg); border-radius:0px;}
70
    48%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
71
      50%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
72
  95%{ -moz-transform:scale(1) rotate(180deg); border-radius:20px;}
73
        100%{ -moz-transform:scale(0) rotate(180deg); border-radius:100px;}
74
}
75
76
@-ms-keyframes preloader {
77
0%{ -ms-transform:scale(0)}
78
10%{ -ms-transform:scale(1.3)}
79
12%{ -ms-transform:scale(1)}
80
15%{ -ms-transform:scale(1.3)}
81
17%{ -ms-transform:scale(1)}
82
25%{ -ms-transform:scale(1)}
83
40%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
84
42%{ -ms-transform:scale(1) rotate(180deg); border-radius:0px;}
85
44%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
86
  46%{ -ms-transform:scale(1) rotate(180deg); border-radius:0px;}
87
    48%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
88
      50%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
89
  95%{ -ms-transform:scale(1) rotate(180deg); border-radius:20px;}
90
        100%{ -ms-transform:scale(0) rotate(180deg); border-radius:100px;}
91
}
92
93
@keyframes preloader {
94
0%{ transform:scale(0)}
95
10%{ transform:scale(1.3)}
96
12%{ transform:scale(1)}
97
15%{ transform:scale(1.3)}
98
17%{ transform:scale(1)}
99
25%{ transform:scale(1)}
100
40%{ transform:scale(1) rotate(180deg); border-radius:20px;}
101
42%{ transform:scale(1) rotate(180deg); border-radius:0px;}
102
44%{ transform:scale(1) rotate(180deg); border-radius:20px;}
103
  46%{ transform:scale(1) rotate(180deg); border-radius:0px;}
104
    48%{ transform:scale(1) rotate(180deg); border-radius:20px;}
105
      50%{ transform:scale(1) rotate(180deg); border-radius:20px;}
106
  95%{ transform:scale(1) rotate(180deg); border-radius:20px;}
107
        100%{ transform:scale(0) rotate(180deg); border-radius:100px;}
108
}
109
  
110
  
111
  
112
  
113
  @-webkit-keyframes preloader_after {
114
0%{ -webkit-transform:scale(0); }
115
45%{ -webkit-transform:scale(0); }
116
50%{ -webkit-transform:scale(1);}
117
55%{ -webkit-transform:scale(1) translateY(-20px) translateX(-14px);}
118
 60%{ -webkit-transform:scale(1) translateY(20px) translateX(14px);}
119
    65%{ -webkit-transform:scale(1) translateY(-20px) translateX(14px);}
120
 70%{ -webkit-transform:scale(1) translateY(20px) translateX(-14px);}
121
        75%{ -webkit-transform:scale(1) translateY(-20px) translateX(14px);}
122
 80%{ -webkit-transform:scale(1) translateY(20px) translateX(-14px);}
123
     85%{ -webkit-transform:scale(1) translateY(-20px) translateX(-14px);}
124
 90%{ -webkit-transform:scale(1) translateY(0px) translateX(0px);}
125
95%{ -webkit-transform:scale(1.5);}
126
100%{ -webkit-transform:scale(0);}
127
  }
128
129
130
  @-moz-keyframes preloader_after {
131
0%{ -moz-transform:scale(0); }
132
45%{ -moz-transform:scale(0); }
133
50%{ -moz-transform:scale(1);}
134
55%{ -moz-transform:scale(1) translateY(-20px) translateX(-14px);}
135
 60%{ -moz-transform:scale(1) translateY(20px) translateX(14px);}
136
    65%{ -moz-transform:scale(1) translateY(-20px) translateX(14px);}
137
 70%{ -moz-transform:scale(1) translateY(20px) translateX(-14px);}
138
        75%{ -moz-transform:scale(1) translateY(-20px) translateX(14px);}
139
 80%{ -moz-transform:scale(1) translateY(20px) translateX(-14px);}
140
     85%{ -moz-transform:scale(1) translateY(-20px) translateX(-14px);}
141
 90%{ -moz-transform:scale(1) translateY(0px) translateX(0px);}
142
95%{ -moz-transform:scale(1.5);}
143
100%{ -moz-transform:scale(0);}
144
  }
145
146
  @-ms-keyframes preloader_after {
147
0%{ -ms-transform:scale(0); }
148
45%{ -ms-transform:scale(0); }
149
50%{ -ms-transform:scale(1);}
150
55%{ -ms-transform:scale(1) translateY(-20px) translateX(-14px);}
151
 60%{ -ms-transform:scale(1) translateY(20px) translateX(14px);}
152
    65%{ -ms-transform:scale(1) translateY(-20px) translateX(14px);}
153
 70%{ -ms-transform:scale(1) translateY(20px) translateX(-14px);}
154
        75%{ -ms-transform:scale(1) translateY(-20px) translateX(14px);}
155
 80%{ -ms-transform:scale(1) translateY(20px) translateX(-14px);}
156
     85%{ -ms-transform:scale(1) translateY(-20px) translateX(-14px);}
157
 90%{ -ms-transform:scale(1) translateY(0px) translateX(0px);}
158
95%{ -ms-transform:scale(1.5);}
159
100%{ -ms-transform:scale(0);}
160
  }
161
162
  @keyframes preloader_after {
163
0%{ transform:scale(0); }
164
45%{ transform:scale(0); }
165
50%{ transform:scale(1);}
166
55%{ transform:scale(1) translateY(-20px) translateX(-14px);}
167
 60%{ transform:scale(1) translateY(20px) translateX(14px);}
168
    65%{ transform:scale(1) translateY(-20px) translateX(14px);}
169
 70%{ transform:scale(1) translateY(20px) translateX(-14px);}
170
        75%{ transform:scale(1) translateY(-20px) translateX(14px);}
171
 80%{ transform:scale(1) translateY(20px) translateX(-14px);}
172
     85%{ transform:scale(1) translateY(-20px) translateX(-14px);}
173
 90%{ transform:scale(1) translateY(0px) translateX(0px);}
174
95%{ transform:scale(1.5);}
175
100%{ transform:scale(0);}
176
  }
177
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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