JSDM

HTML

 
1
<div id="box">
2
  <div id="ball"></div>
3
  <div class="dot" id="one"></div>
4
  <div class="dot" id="two"></div>
5
  <div class="dot" id="three"></div>
6
  <div class="dot" id="four"></div>
7
  
8
  <div class="box-small">
9
    <div class="ball-small"></div>
10
    <div class="small-dot" id="one-small"></div>
11
    <div class="small-dot" id="two-small"></div>
12
    <div class="small-dot" id="three-small"></div>
13
    <div class="small-dot" id="four-small"></div>
14
  </div>
15
  
16
  <div class="box-tiny">
17
    <div class="ball-small" id="delay"></div>
18
    <div class="small-dot" id="one-tiny"></div>
19
    <div class="small-dot" id="two-tiny"></div>
20
    <div class="small-dot" id="three-tiny"></div>
21
    <div class="small-dot" id="four-tiny"></div>
22
  </div>
23
</div>

CSS

x
 
1
body {
2
  background-color: rgb(17, 34, 51);
3
}
4
5
#ball {
6
  width: 25px;
7
  height: 25px;
8
  position: relative;
9
  background-color: rgb(100, 100, 100);
10
  border-radius: 50%;
11
  border: 1px solid white;
12
  z-index: 2;
13
  -webkit-animation: bounceBall 2s linear infinite;
14
  animation: bounceBall 2s linear infinite;
15
}
16
17
.ball-small {
18
  width: 7px;
19
  height: 7px;
20
  position: relative;
21
  background-color: rgb(75, 75, 75);
22
  border-radius: 50%;
23
  border: 1px solid white;
24
  -webkit-animation: bounceSmallBall 2s linear infinite;
25
  animation: bounceSmallBall 2s linear infinite;
26
}
27
28
#delay {
29
  -webkit-animation-delay: -99s;
30
  animation-delay: -99s;
31
}
32
33
#box {
34
  width: 200px;
35
  height: 200px;
36
  position: absolute;
37
  top: 50%;
38
  left: 50%;
39
  margin-top: -100px;
40
  margin-left: -100px;
41
  -moz-transform: rotate(45deg);
42
  -webkit-transform: rotate(45deg);
43
  transform: rotate(45deg);
44
  overflow: hidden;
45
}
46
47
.box-small {
48
  width: 100px;
49
  height: 100px;
50
  position: absolute;
51
  top: 50%;
52
  left: 50%;
53
  margin-top: -50px;
54
  margin-left: -50px;
55
  -moz-transform: rotate(45deg);
56
  -webkit-transform: rotate(45deg);
57
  transform: rotate(45deg);
58
}
59
60
.box-tiny {
61
  width: 100px;
62
  height: 100px;
63
  position: absolute;
64
  top: 50%;
65
  left: 50%;
66
  margin-top: -50px;
67
  margin-left: -50px;
68
}
69
70
.dot {
71
  width: 5px;
72
  height: 5px;
73
  border-radius: 50%;
74
  position: absolute;
75
  -webkit-animation: colorPulse 2s infinite;
76
  animation: colorPulse 2s infinite;
77
}
78
79
.small-dot {
80
  width: 3px;
81
  height: 3px;
82
  border-radius: 50%;
83
  position: absolute;
84
  -webkit-animation: colorPulse 2s infinite;
85
  animation: colorPulse 2s infinite;
86
}
87
88
#one, #one-small, #one-tiny {
89
  top: 0px;
90
  left: 0px;
91
  -webkit-animation-delay: 0s;
92
  animation-delay: 0s;
93
}
94
95
#two, #two-small, #two-tiny {
96
  top: 0px;
97
  right: 0px;
98
  -webkit-animation-delay: 0.5s;
99
  animation-delay: 0.5s;
100
}
101
102
#three, #three-small, #three-tiny {
103
  bottom: 0px;
104
  right: 0px;
105
  -webkit-animation-delay: 1s;
106
  animation-delay: 1s;
107
}
108
109
#four, #four-small, #four-tiny {
110
  bottom: 0px;
111
  left: 0px;
112
  -webkit-animation-delay: 1.5s;
113
  animation-delay: 1.5s;
114
}
115
116
@-webkit-keyframes bounceBall {
117
  0% {
118
    left: 0px;
119
    top: 0px;
120
  }
121
  
122
  25% {
123
    left: 171px;
124
    top: 0px;
125
  }
126
  
127
  50% {
128
    top: 171px;
129
    left: 171px;
130
  }
131
  
132
  75% {
133
    left: 0px;
134
    top: 171px;
135
  }
136
  
137
  100% {
138
    top: 0px;
139
    left: 0px;
140
  }
141
}
142
143
@keyframes bounceBall {
144
  0% {
145
    left: 0px;
146
    top: 0px;
147
  }
148
  
149
  25% {
150
    left: 171px;
151
    top: 0px;
152
  }
153
  
154
  50% {
155
    top: 171px;
156
    left: 171px;
157
  }
158
  
159
  75% {
160
    left: 0px;
161
    top: 171px;
162
  }
163
  
164
  100% {
165
    top: 0px;
166
    left: 0px;
167
  }
168
}
169
170
@-webkit-keyframes bounceSmallBall {
171
  0% {
172
    left: 0px;
173
    top: 0px;
174
  }
175
  
176
  25% {
177
    left: 90px;
178
    top: 0px;
179
  }
180
  
181
  50% {
182
    top: 90px;
183
    left: 90px;
184
  }
185
  
186
  75% {
187
    left: 0px;
188
    top: 90px;
189
  }
190
  
191
  100% {
192
    top: 0px;
193
    left: 0px;
194
  }
195
}
196
197
@keyframes bounceSmallBall {
198
  0% {
199
    left: 0px;
200
    top: 0px;
201
  }
202
  
203
  25% {
204
    left: 90px;
205
    top: 0px;
206
  }
207
  
208
  50% {
209
    top: 90px;
210
    left: 90px;
211
  }
212
  
213
  75% {
214
    left: 0px;
215
    top: 90px;
216
  }
217
  
218
  100% {
219
    top: 0px;
220
    left: 0px;
221
  }
222
}
223
224
@-webkit-keyframes colorPulse {
225
  from, to {
226
    background-color: rgba(200, 200, 200, 1);
227
  }
228
  
229
  50% {
230
    background-color: rgba(200, 200, 200, 0.2);
231
  }
232
}
233
234
@keyframes colorPulse {
235
  from, to {
236
    background-color: rgba(200, 200, 200, 1);
237
  }
238
  
239
  50% {
240
    background-color: rgba(200, 200, 200, 0.2);
241
  }
242
}
? ?
? ?
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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