JSDM

HTML

290
1
<html>
2
<head>
3
</head>
4
<body>
5
<div id="content">
6
​
7
    <div class="round ball bowling" id="bowling1">
8
        <div class="round finger"></div>
9
        <div class="round finger"></div>
10
        <div class="round finger"></div>
11
    </div>
12
​
13
    <div class="round ball bowling" id="bowling2">
14
      <div class="ballRotate">
15
        <div class="round finger"></div>
16
        <div class="round finger"></div>
17
        <div class="round finger"></div>
18
      </div>
19
    </div>
20
​
21
    <div class="round ball bowling" id="bowling3">
22
      <div class="ballRotate">
23
        <div class="round finger"></div>
24
        <div class="round finger"></div>
25
        <div class="round finger"></div>
26
      </div>
27
    </div>
28
​
29
    <div class="round basketBall" id="basketBall1">
30
        <div class="in round">
31
          <div class="in round"></div>
32
        </div>
33
        <div class="in round">
34
          <div class="in round"></div>
35
        </div>
36
        <div class="rectangle"></div>
37
        <div class="rectangle"></div>
38
    </div>
39
​
40
    <div class="treadmill round" id="treadmill1">
41
      <div class="cog round rotateIn">
42
        <div class="in round">
43
          <div class="rectangle vertical"></div>
44
          <div class="rectangle"></div>
45
        </div>
46
      </div>
47
      <div class="wheel round"></div>
48
      <div class="wheel round"></div>
49
      <div class="footer">
50
        <div class="rectangle"></div>
51
        <div class="rectangle vertical"></div>
52
      </div>
53
      <div class="footer">
54
        <div class="rectangle"></div>
55
        <div class="rectangle vertical"></div>
56
      </div>
57
    </div>
58
​
59
    <div class="treadmill round" id="treadmill2">
60
      <div class="cog round rotateIn">
61
        <div class="in round">
62
          <div class="rectangle vertical"></div>
63
          <div class="rectangle"></div>
64
        </div>
65
      </div>
66
      <div class="wheel round"></div>
67
      <div class="wheel round"></div>
68
      <div class="footer">
69
        <div class="rectangle"></div>
70
        <div class="rectangle vertical"></div>
71
      </div>
72
      <div class="footer">
73
        <div class="rectangle"></div>
74
        <div class="rectangle vertical"></div>
75
      </div>
76
    </div>
77
​
78
    <div class="treadmill round" id="treadmill3">
79
      <div class="cog round rotateIn">
80
        <div class="in round">
81
          <div class="rectangle vertical"></div>
82
          <div class="rectangle"></div>
83
        </div>
84
      </div>
85
      <div class="wheel round"></div>
86
      <div class="wheel round"></div>
87
      <div class="footer">
88
        <div class="rectangle"></div>
89
        <div class="rectangle vertical"></div>
90
      </div>
91
      <div class="footer">
92
        <div class="rectangle"></div>
93
        <div class="rectangle vertical"></div>
94
      </div>
95
    </div>
96
​
97
    <div class="mouseMotor" id="mouseMotor1">
98
      <div class="in">
99
        <div class="cog round rotateIn">
100
          <div class="in round">
101
            <div class="rectangle vertical"></div>
102
            <div class="rectangle"></div>
103
          </div>
104
        </div>
105
        <div class="cog round">
106
          <div class="in round"></div>
107
        </div>
108
        <div class="piston">
109
          <div class="cog round"></div>
110
        </div>
111
        <div class="mouse">
112
          <div class="headMouse round">
113
            <div class="eye round"></div>
114
            <div class="snout round"></div>
115
          </div>
116
          <div class="ear round">
117
            <div class="in round"></div>
118
          </div>
119
          <div class="bodyMouse round"></div>
120
          <div class="footMouse"></div>
121
          <div class="footMouse"></div>
122
        </div>
123
      </div>
124
    </div>
125
​
126
    <div class="mouseMotor" id="mouseMotor2">
127
      <div class="in">
128
        <div class="cog round rotateIn">
129
          <div class="in round">
130
            <div class="rectangle vertical"></div>
131
            <div class="rectangle"></div>
132
          </div>
133
        </div>
134
        <div class="cog round">
135
          <div class="in round"></div>
136
        </div>
137
        <div class="piston">
138
          <div class="cog round"></div>
139
        </div>
140
        <div class="mouse">
141
          <div class="headMouse round">
142
            <div class="eye round"></div>
143
            <div class="snout round"></div>
144
          </div>
145
          <div class="ear round">
146
            <div class="in round"></div>
147
          </div>
148
          <div class="bodyMouse round"></div>
149
          <div class="footMouse"></div>
150
          <div class="footMouse"></div>
151
        </div>
152
      </div>
153
    </div>
154
​
155
    <div class="mouseMotor" id="mouseMotor3">
156
      <div class="in">
157
        <div class="cog round rotateIn">
158
          <div class="in round">
159
            <div class="rectangle vertical"></div>
160
            <div class="rectangle"></div>
161
          </div>
162
        </div>
163
        <div class="cog round">
164
          <div class="in round"></div>
165
        </div>
166
        <div class="piston">
167
          <div class="cog round"></div>
168
        </div>
169
        <div class="mouse">
170
          <div class="headMouse round">
171
            <div class="eye round"></div>
172
            <div class="snout round"></div>
173
          </div>
174
          <div class="ear round">
175
            <div class="in round"></div>
176
          </div>
177
          <div class="bodyMouse round"></div>
178
          <div class="footMouse"></div>
179
          <div class="footMouse"></div>
180
        </div>
181
      </div>
182
    </div>
183
​
184
    <div class="node" id="node1">
185
      <div class="in"></div>
186
      <div class="in"></div>
187
    </div>
188
​
189
    <div class="node" id="node2">
190
      <div class="in"></div>
191
      <div class="in"></div>
192
    </div>
193
​
194
    <div class="node" id="node3">
195
      <div class="in"></div>
196
      <div class="in"></div>
197
    </div>
198
​
199
    <div class="wall">
200
      <div class="lign">
201
        <div class="brick"></div>
202
        <div class="brick"></div>
203
        <div class="brick"></div>
204
        <div class="brick"></div>
205
        <div class="brick"></div>
206
        <div class="brick"></div>
207
        <div class="brick"></div>
208
        <div class="brick"></div>
209
        <div class="brick"></div>
210
        <div class="brick"></div>
211
        <div class="brick"></div>
212
        <div class="brick"></div>
213
        <div class="brick"></div>
214
        <div class="brick"></div>
215
        <div class="brick"></div>
216
        <div class="brick"></div>
217
        <div class="brick"></div>
218
        <div class="brick"></div>
219
        <div class="brick"></div>
220
        <div class="brick"></div>
221
        <div class="brick"></div>
222
        <div class="brick"></div>
223
        <div class="brick"></div>
224
        <div class="brick"></div>
225
        <div class="brick"></div>
226
      </div>
227
      <div class="lign">
228
        <div class="brick"></div>
229
        <div class="brick"></div>
230
        <div class="brick"></div>
231
        <div class="brick"></div>
232
        <div class="brick"></div>
233
        <div class="brick"></div>
234
        <div class="brick"></div>
235
        <div class="brick"></div>
236
        <div class="brick"></div>
237
        <div class="brick"></div>
238
        <div class="brick"></div>
239
        <div class="brick"></div>
240
        <div class="brick"></div>
241
        <div class="brick"></div>
242
        <div class="brick"></div>
243
        <div class="brick"></div>
244
        <div class="brick"></div>
245
        <div class="brick"></div>
246
        <div class="brick"></div>
247
        <div class="brick"></div>
248
        <div class="brick"></div>
249
        <div class="brick"></div>
250
        <div class="brick"></div>
251
        <div class="brick"></div>
252
        <div class="brick"></div>
253
      </div>
254
    </div>
255
​
256
    <div class="basket">
257
      <div id="contentRamp1">
258
        <div class="ramp wood">
259
          <div class="in"></div>
260
        </div>
261
      </div>
262
      <div id="contentRamp2">
263
        <div class="ramp wood">
264
          <div class="in"></div>
265
        </div>
266
      </div>
267
      <div class="panel wood">
268
        <div class="in"></div>
269
      </div>
270
​
271
      <div class="pylon">
272
        <div class="end"><div class="in"></div></div>
273
        <div class="end"><div class="in"></div></div>
274
        <div class="in"></div>
275
      </div>
276
277
      <div class="contentPylonRound">
278
        <div class="pylonRound">
279
          <div class="in"></div>
280
          <div class="in"></div>
281
          <div class="end"><div class="in"></div></div>
282
          <div class="end"><div class="in"></div></div>
283
        </div>
284
        <div class="separate"></div>
285
      </div>
286
​
287
    </div>
288
  </div>
289
</body>
290
</html>

CSS

xxxxxxxxxx
1031
 
1
  *{
2
    margin:0;
3
    padding:0;
4
  }
5
  body{
6
    background-color:#2eb5b8;
7
    /*background:url(tim.png);*/
8
    background-size:100%,100%;
9
    margin-top:30%;
10
  }
11
​
12
  #content{
13
    display: block;
14
    position: relative;
15
    padding-bottom: 6%;
16
    top: 50%;
17
  }
18
​
19
  .cog{
20
    display:block;
21
    position:absolute;
22
      -webkit-animation-fill-mode: both;
23
      animation-fill-mode: both;
24
      -webkit-animation-timing-function: linear;
25
      animation-timing-function: linear;
26
      animation-iteration-count:infinite;
27
      -webkit-animation-iteration-count:infinite;
28
      -webkit-transform-origin: center center;
29
      transform-origin: center center;
30
  }
31
​
32
  .cog .in{
33
    display:block;
34
    position:relative;
35
    width:100%;
36
    padding-bottom: 100%;
37
  }
38
​
39
  .cog .rectangle{
40
    display: block;
41
    position: absolute;
42
    width: 100%;
43
    padding-bottom: 20%;
44
    top: 40%;
45
    background-color: #dbdbdb;
46
  }
47
​
48
  .vertical{
49
    -ms-transform: rotate(90deg);
50
      -webkit-transform: rotate(90deg);
51
      transform: rotate(90deg);
52
  }
53
​
54
  .round{
55
    -webkit-border-radius: 99em;
56
    -moz-border-radius: 99em;
57
    border-radius: 99em;
58
  }
59
​
60
  .rotateIn {
61
      -webkit-animation-name: rotateIn;
62
      animation-name: rotateIn;
63
      -webkit-transform: rotate(360deg);
64
      transform: rotate(360deg);
65
​
66
  }
67
​
68
  @-webkit-keyframes rotateIn {
69
      0% {
70
          -webkit-transform: rotate(0deg);
71
      }
72
      100% {
73
          -webkit-transform: rotate(360deg);
74
      }
75
  }
76
  @keyframes rotateIn {
77
      0% {
78
          transform: rotate(0deg);
79
      }
80
      100% {
81
          transform: rotate(360deg);
82
      }
83
  }
84
​
85
/*TREADMILL*/
86
​
87
  #treadmill1{
88
    top: 200%;
89
    left: 14%;
90
  }
91
​
92
  #treadmill2{
93
    top: 0%;
94
    left: 32%;
95
  }
96
​
97
  #treadmill3{
98
    top: -190%;
99
    left: 48%;
100
  }
101
​
102
  .treadmill{
103
    display:block;
104
    width:15%;
105
    padding-bottom: 2.5%;
106
    position:absolute;
107
      height: 0;
108
    background-color:#2853d6;
109
  }
110
​
111
  .treadmill .cog{
112
    width:12%;
113
    padding:2.5%;
114
    left:60%;
115
    background-color:#dbdbdb;
116
    z-index:16;
117
    -webkit-animation-duration: .7s;
118
      animation-duration: .7s;
119
  }
120
​
121
  .treadmill .cog .rectangle{
122
    background-color: #dbdbdb;
123
  }
124
​
125
  .treadmill .cog .in{
126
    background-color:#2853d6;
127
  }
128
​
129
  .treadmill .footer {
130
    display: block;
131
    position: absolute;
132
    width: 12%;
133
    padding-bottom: 12%;
134
    top: 50%;
135
    z-index: 12;
136
    left: 1%;
137
  }
138
​
139
  .treadmill .footer .rectangle{
140
    display: block;
141
    position: absolute;
142
    width: 25%;
143
    padding-bottom: 100%;
144
    background-color: #dbdbdb;
145
    left: 45%;
146
  }
147
​
148
  .treadmill .footer .vertical{
149
    top: 45%;
150
  }
151
​
152
  .treadmill > .footer + .footer{
153
    margin-left:84%;
154
  }
155
​
156
  .treadmill .wheel{
157
    display: block;
158
    position: absolute;
159
    width: 13%;
160
    padding-bottom: 12%;
161
    top: 15%;
162
    background-color: #1944C5;
163
    z-index: 11;
164
    left: 2%;
165
  }
166
​
167
  .treadmill > .wheel + .wheel{
168
    margin-left:83%;
169
  }
170
​
171
​
172
​
173
/*MOUSE MOTOR*/
174
​
175
  #mouseMotor1{
176
    top: 200%;
177
    left: 5%;
178
  }
179
​
180
  #mouseMotor1 .mouse, #mouseMotor1 .in .cog, #mouseMotor1 .mouse .footMouse, #treadmill1 .cog {
181
      animation-delay:2s;
182
      -webkit-animation-delay:2s;
183
  }
184
​
185
  #mouseMotor2{
186
    top: 102%;
187
    left: 29%;
188
  }
189
​
190
  #mouseMotor2 .mouse, #mouseMotor2 .in .cog, #mouseMotor2 .mouse .footMouse, #treadmill2 .cog{
191
      animation-delay:3s;
192
      -webkit-animation-delay:3s;
193
  }
194
​
195
  #mouseMotor3{
196
    top: -96%;
197
    right: 44%;
198
  }
199
​
200
  #mouseMotor3 .mouse, #mouseMotor3 .in .cog, #mouseMotor3 .mouse .footMouse, #treadmill3 .cog{
201
      animation-delay:4s;
202
      -webkit-animation-delay:4s;
203
  }
204
​
205
  .mouseMotor{
206
    display: block;
207
    position: absolute;
208
    width: 8%;
209
    padding: 0.5%;
210
    background-color: #4AC282;
211
  }
212
  .mouseMotor > .in{
213
    display: block;
214
    position: relative;
215
    width: 100%;
216
    padding-bottom: 60%;
217
  }
218
​
219
  .mouseMotor > .in > .cog{
220
    -webkit-animation-duration: 1s;
221
      animation-duration: 1s;
222
  }
223
​
224
  .mouseMotor > .in > .cog:nth-child(1){
225
    width: 47%;
226
    padding: 9%;
227
    left: 0%;
228
    top: -4%;
229
    background-color: #37B074;
230
  }
231
​
232
  .mouseMotor > .in > .cog:nth-child(1) > .in{
233
    width: 100%;
234
    padding-bottom: 100%;
235
    background-color: #2eb5b8;
236
  }
237
​
238
  .mouseMotor > .in > .cog:nth-child(1) > .in > .rectangle{
239
    background-color: #1944C5;
240
  }
241
​
242
  .mouseMotor > .in > .cog:nth-child(2){
243
    width: 14%;
244
    padding: 5%;
245
    right: 5%;
246
    top: 7%;
247
    background-color: #dbdbdb;
248
    z-index: 16;
249
      }
250
​
251
  .mouseMotor > .in >.cog:nth-child(2) .in{
252
    background-color: #CACACA;
253
  }
254
​
255
  .mouseMotor > .in > .piston{
256
    display: none;
257
    position: absolute;
258
    width: 37%;
259
    padding-bottom: 17%;
260
    background-color: #1FA0A3;
261
    bottom: 0%;
262
    right: 0%;
263
    z-index: 10;
264
  }
265
​
266
  .mouseMotor > .in > .piston > .cog{
267
    width: 0%;
268
    padding: 35%;
269
    left: 15%;
270
    top: -60%;
271
    background-color: #1FA0A3;
272
  }
273
​
274
  .mouse {
275
    display: block;
276
    position: absolute;
277
    width: 30%;
278
    padding-bottom: 15%;
279
    bottom: 13%;
280
    left: 21%;
281
    -webkit-animation-name: mouseAnim;
282
      animation-name: mouseAnim;
283
      -webkit-animation-fill-mode: both;
284
      animation-fill-mode: both;
285
      -webkit-animation-timing-function: linear;
286
      animation-timing-function: linear;
287
      -webkit-animation-duration: .5s;
288
      animation-duration: .5s;
289
      animation-iteration-count:infinite;
290
      -webkit-animation-iteration-count:infinite;
291
  }
292
​
293
  @-webkit-keyframes mouseAnim {  
294
      0% {left: 21%;}
295
      50% {left: 16%;}
296
      100% {left: 21%;}
297
  }
298
  @keyframes mouseAnim {
299
      0% {left: 21%;}
300
      50% {left: 16%;}
301
      100% {left: 21%;}
302
  }
303
​
304
  .mouse .bodyMouse{
305
    display: block;
306
    position: absolute;
307
    width: 80%;
308
    padding-bottom: 40%;
309
    background-color: #EDEDED;
310
    bottom: 0%;
311
    left: 0%;
312
      }
313
​
314
  .mouse .footMouse{
315
    display: block;
316
    position: absolute;
317
    width: 26%;
318
    padding-bottom: 26%;
319
    background-color: #EDEDED;
320
    bottom: -15%;
321
    left: 13%;
322
    transform: rotate(45deg);
323
    -webkit-transform: rotate(45deg);
324
    -webkit-animation-name: mouseWalk;
325
      animation-name: mouseWalk;
326
      -webkit-animation-duration: .5s;
327
      animation-duration: .5s;
328
      -webkit-animation-fill-mode: both;
329
      animation-fill-mode: both;
330
      -webkit-animation-timing-function: linear;
331
      animation-timing-function: linear;
332
      animation-iteration-count:infinite;
333
      -webkit-animation-iteration-count:infinite;
334
  }
335
​
336
  @-webkit-keyframes mouseWalk {
337
      0% {left: 13%;}
338
      50% {left: 18%;}
339
      100% {left: 13%;}
340
  }
341
  @keyframes mouseWalk {
342
      0% {left: 13%;}
343
      50% {left: 18%;}
344
      100% {left: 13%;}
345
  }
346
​
347
  .mouse .footMouse + .footMouse{
348
    left: 32%;
349
    -webkit-animation-name: mouseWalk2 !important;
350
      animation-name: mouseWalk2 !important;
351
  }
352
  @-webkit-keyframes mouseWalk2 {
353
      0% {left: 36%;}
354
      50% {left: 28%;}
355
      100% {left: 36%;}
356
  }
357
  @keyframes mouseWalk2 {
358
      0% {left: 36%;}
359
      50% {left: 28%;}
360
      100% {left: 36%;}
361
  }
362
  .mouse .headMouse{
363
    display: block;
364
    position: absolute;
365
    width: 56%;
366
    padding-bottom: 49%;
367
    background-color: #EDEDED;
368
    bottom: 0%;
369
    left: 34%;
370
  }
371
​
372
  .mouse .headMouse > .eye{
373
    display: block;
374
    position: absolute;
375
    width: 14%;
376
    padding-bottom: 14%;
377
    background-color: #1D1D1D;
378
    bottom: 53%;
379
    left: 61%;
380
    z-index: 15;
381
  }
382
​
383
  .mouse .headMouse > .snout{
384
    display: block;
385
    position: absolute;
386
    width: 53%;
387
    padding-bottom: 39%;
388
    background-color: #EDEDED;
389
    bottom: 0%;
390
    left: 61%;
391
  }
392
​
393
  .mouse .ear{
394
    display: block;
395
    position: absolute;
396
    width: 14%;
397
    padding: 6%;
398
    background-color: #EDEDED;
399
    bottom: 43%;
400
    left: 42%;
401
    z-index: 15;
402
  }
403
​
404
  .mouse .ear > .in{
405
    display: block;
406
    position: relative;
407
    width: 100%;
408
    padding-bottom: 150%;
409
    background-color: #DB8676;
410
  }
411
​
412
/*BOWLING BALL*/
413
​
414
  #bowling1{
415
    left: 7%;
416
    top: 114%;
417
    -webkit-transform: rotate(90deg);
418
      transform: rotate(90deg);
419
    -webkit-animation-name: bowling1Anim;
420
      animation-name: bowling1Anim;
421
      -webkit-animation-duration: 2.4s;
422
      animation-duration: 2.4s;
423
      -webkit-animation-timing-function: linear;
424
      animation-timing-function: linear;
425
      opacity:1;
426
  }
427
​
428
  @-webkit-keyframes bowling1Anim {
429
      0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;}
430
      74% {opacity:1;}
431
      84% {top: 114%;}
432
      88% {top: 90%;}
433
      92% {top: 114%;transform: rotate(90deg);}
434
      95% {top: 100%;}
435
      100% {top: 114%;}
436
  }
437
​
438
  @keyframes bowling1Anim {
439
      0%, 70% {top: -550%;transform: rotate(0deg);opacity:0;}
440
      74% {opacity:1;}
441
      84% {top: 114%;}
442
      88% {top: 90%;}
443
      92% {top: 114%;transform: rotate(90deg);}
444
      95% {top: 100%;}
445
      100% {top: 114%;}
446
  }
447
​
448
  #bowling2{
449
    left: 16%;
450
    top: 115%;
451
    -webkit-animation-name: bowling2Move;
452
      animation-name: bowling2Move;
453
      -webkit-animation-delay: 2.4s;
454
      animation-delay: 2.4s;
455
      -webkit-animation-duration: .6s;
456
      animation-duration: .6s;
457
      -webkit-animation-timing-function: ease-in;
458
      animation-timing-function: ease-in;
459
      animation-fill-mode: forwards;
460
      -webkit-animation-fill-mode: forwards;
461
  }
462
​
463
  @-webkit-keyframes bowling2Move {
464
      0% {left: 16%;}
465
      100% {left: 23.7%;}
466
  }
467
  @keyframes bowling2Move {
468
      0% {left: 16%;}
469
      100% {left: 23.7%;}
470
  }
471
​
472
  #bowling3{
473
    left: 34%;
474
    top: -85%;
475
    -webkit-animation-name: bowling3Move;
476
      animation-name: bowling3Move;
477
      -webkit-animation-delay: 3.4s;
478
      animation-delay: 3.4s;
479
      -webkit-animation-duration: .6s;
480
      animation-duration: .6s;
481
      -webkit-animation-timing-function: ease-in;
482
      animation-timing-function: ease-in;
483
      animation-fill-mode: forwards;
484
      -webkit-animation-fill-mode: forwards;
485
  }
486
​
487
  @-webkit-keyframes bowling3Move {
488
      0% {left: 34%;}
489
      100% {left: 41.8%;}
490
  }
491
  @keyframes bowling3Move {
492
      0% {left: 34%;}
493
      100% {left: 41.8%;}
494
  }
495
​
496
  .ball {
497
    display: block;
498
    position: absolute;
499
    width: 5.2%;
500
    padding-bottom: 5.2%;
501
  }
502
  .bowling{
503
    background-color: #1944C5;
504
    position: absolute;
505
    display: block;
506
    -webkit-transform: rotate(0deg);
507
      transform: rotate(0deg);
508
  }
509
​
510
  .ballRotate {
511
    display: block;
512
    position: absolute;
513
    width: 100%;
514
    padding-bottom: 100%;
515
    -webkit-animation-name: bowlingRotate;
516
      animation-name: bowlingRotate;
517
      -webkit-animation-duration: 1s;
518
      animation-duration: 1s;
519
      -webkit-animation-timing-function: linear;
520
      animation-timing-function: linear;
521
      animation-iteration-count:infinite;
522
      -webkit-animation-iteration-count:infinite;
523
  }
524
​
525
  @-webkit-keyframes bowlingRotate {
526
      0% {transform: rotate(0deg);}
527
      100% {transform: rotate(360deg);}
528
  }
529
  @keyframes bowlingRotate {
530
      0% {transform: rotate(0deg);}
531
      100% {transform: rotate(360deg);}
532
  }
533
​
534
  #bowling2 .ballRotate {
535
      -webkit-animation-delay: 2.4s;
536
      animation-delay: 2.4s;
537
  }
538
​
539
  #bowling3 .ballRotate {
540
      -webkit-animation-delay: 3.4s;
541
      animation-delay: 3.4s;
542
  }
543
​
544
  .bowling .finger{
545
    display: block;
546
    position: absolute;
547
    width: 10%;
548
    padding-bottom: 10%;
549
    background-color: #1D1D1D;
550
  }
551
  .bowling .finger:nth-child(1){
552
    top: 22%;
553
    left:47%;
554
  }
555
  .bowling .finger:nth-child(2){
556
    top: 24%;
557
    left:65%;
558
  }
559
  .bowling .finger:nth-child(3){
560
    top: 38%;
561
    left:54%;
562
  }
563
​
564
  /*BASKET BALL*/
565
​
566
  #basketBall1{
567
    left: 50%;
568
    top: -285%;
569
    -webkit-animation-name:basketBallAnim;
570
      animation-name:basketBallAnim;
571
      -webkit-animation-delay: 4s;
572
      animation-delay: 4s;
573
      -webkit-animation-duration: 6s;
574
      animation-duration: 6s;
575
      -webkit-animation-timing-function: ease-out;
576
      animation-timing-function: ease-out;
577
      animation-fill-mode: forwards;
578
      -webkit-animation-fill-mode: forwards;
579
      transform: rotate(-45deg);
580
    -webkit-transform: rotate(-45deg);
581
  }
582
​
583
  @-webkit-keyframes basketBallAnim {
584
      0% {left: 50%;top: -285%;-webkit-transform: rotate(-45deg);}
585
    6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;}
586
      10% {left: 75%;top: -198%;width: 5.5%;}/*panel*/
587
      14%{left: 71%;top: -220%;width: 5.8%;-webkit-transform: rotate(180deg);}
588
      16%{left: 66%;top: -210%;width: 5.5%;}/*panel*/
589
      20%{left: 70%;top: -200%;width: 5.8%;}
590
    23%{left: 72%;top: -128%;width: 5.5%;-webkit-transform: rotate(45deg);}/*panel*/
591
      25%{left: 70%;top: -96%;width: 5.5%;}
592
      29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;}
593
    32%{left: 80%;top: 275%;padding-bottom: 5.2%;-webkit-transform: rotate(360deg);} /*sol*/
594
    34%{left: 75%;top: 185%;padding-bottom: 6%;}
595
    36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /*sol*/
596
    38%{left: 70%;top: 224%;padding-bottom: 6%;}
597
    40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /*sol*/
598
    42%{left: 67%;top: 248%;padding-bottom: 5.8%;}
599
    43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /*sol*/
600
    44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;-webkit-transform: rotate(0deg);}
601
    45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /*sol*/
602
    46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;}
603
    47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /*sol*/
604
    90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;-webkit-transform: rotate(-150deg);}
605
  }
606
  @keyframes basketBallAnim {
607
      0% {left: 50%;top: -285%;transform: rotate(-45deg);}
608
    6% {left: 60%;top: -285%;width: 5.8%;padding-bottom: 5.8%;}
609
      10% {left: 75%;top: -198%;width: 5.5%;}/*panel*/
610
      14%{left: 71%;top: -220%;width: 5.8%;transform: rotate(180deg);}
611
      16%{left: 66%;top: -210%;width: 5.5%;}/*panel*/
612
      20%{left: 70%;top: -200%;width: 5.8%;}
613
    23%{left: 72%;top: -128%;width: 5.5%;transform: rotate(45deg);}/*panel*/
614
      25%{left: 70%;top: -96%;width: 5.5%;}
615
      29%{left: 74%;top: 55%;width: 5.8%;padding-bottom: 5.8%;}
616
    32%{left: 80%;top: 275%;padding-bottom: 5.2%;transform: rotate(360deg);} /*sol*/
617
    34%{left: 75%;top: 185%;padding-bottom: 6%;}
618
    36%{left: 72%;top: 275%;padding-bottom: 5.2%;} /*sol*/
619
    38%{left: 70%;top: 224%;padding-bottom: 6%;}
620
    40%{left: 68%;top: 280%;padding-bottom: 5.2%;} /*sol*/
621
    42%{left: 67%;top: 248%;padding-bottom: 5.8%;}
622
    43%{left: 66%;top: 272%;padding-bottom: 5.4%;} /*sol*/
623
    44%{left: 65.5%;top: 256%;padding-bottom: 5.8%;transform: rotate(0deg);}
624
    45%{left: 65%;top: 272%;padding-bottom: 5.6%;} /*sol*/
625
    46%{left: 64.5%;top: 268%;padding-bottom: 5.8%;}
626
    47%{left: 64%;top: 272%;padding-bottom: 5.6%;} /*sol*/
627
    90%, 100%{left: 59%;top: 270%;padding-bottom: 5.8%;transform: rotate(-150deg);}
628
  }
629
​
630
  .basketBall{
631
    overflow:hidden;
632
    background-color:#C26125;
633
    display: block;
634
    position: absolute;
635
    width: 5.8%;
636
    padding-bottom: 5.8%;
637
  }
638
​
639
  .basketBall > .in{
640
    display: block;
641
    position: absolute;
642
    background-color: #AB4D24;
643
    width: 100%;
644
    padding: 5%;
645
  }
646
​
647
  .basketBall > .in:nth-child(1){
648
    left: 0%;
649
    top: -78%;
650
  }
651
​
652
  .basketBall .in:nth-child(2){
653
    left: 0%;
654
    top: 72%;
655
  }
656
​
657
  .basketBall .in > .in{
658
    display: block;
659
    position: relative;
660
    width: 100%;
661
    padding-bottom: 100%;
662
    background-color: #C26125;
663
  }
664
665
  .basketBall .rectangle{
666
    display: block;
667
    position: absolute;
668
    width: 125%;
669
    padding-bottom: 5%;
670
    background-color: #AB4D24;
671
    top: 50%;
672
    left: -11%;
673
  }
674
​
675
  .basketBall .rectangle + .rectangle{
676
    transform: rotate(90deg);
677
    -webkit-transform: rotate(90deg);
678
    top: 53%;
679
  }
680
​
681
  /*NODE*/
682
​
683
  #node1{
684
      transform: rotate(-4deg);
685
    -webkit-transform: rotate(-4deg);
686
    left: 12%;
687
    top: 214%;
688
    width: 12%;
689
  }
690
​
691
  #node2{
692
      transform: rotate(-49deg);
693
    -webkit-transform: rotate(-49deg);
694
    left: 36.12%;
695
    top: 116%;
696
    width: 9%;
697
  }
698
​
699
  #node3{
700
      transform: rotate(-57deg);
701
    -webkit-transform: rotate(-57deg);
702
    left: 54%;
703
    top: -81%;
704
    width: 8%;
705
  }
706
​
707
  .node{
708
    display: block;
709
    position:absolute;
710
    -webkit-transform-origin: left center;
711
      transform-origin: left center;
712
      padding-bottom: 2%;
713
      z-index:15;
714
  }
715
​
716
  .node > .in {
717
    display: block;
718
    position:absolute;
719
    width:100%;
720
    background-color:#1d1d1d;
721
  }
722
​
723
  #node1 > .in {padding-bottom:2%;}
724
  #node2 > .in {padding-bottom:3%;}
725
  #node3 > .in {padding-bottom:3%;}
726
​
727
  .node > .in + .in {
728
    bottom: -8%;
729
    transform: rotate(3deg);
730
    -webkit-transform: rotate(3deg);
731
  }
732
​
733
  /*WALL*/
734
​
735
  .wall{
736
    display: block;
737
    position: absolute;
738
    width: 85%;
739
    padding-bottom: 2.5%;
740
    background-color: #dbdbdb;
741
    bottom: -308%;
742
    right: 5%;
743
  }
744
​
745
  .wall .lign{
746
    display: block;
747
    position: absolute;
748
    width: 104%;
749
  }
750
​
751
  .wall .lign:nth-child(1){
752
    left: -0.8%;
753
    top: -13%;
754
  }
755
​
756
  .wall .lign:nth-child(2){
757
    left: -.5%;
758
    bottom: -10%;
759
  }
760
​
761
  .wall .lign .brick{
762
    display: block;
763
    float: left;
764
    position: relative;
765
    margin: 0 0.2%;
766
    width: 3.5%;
767
    padding-top: 1.5%;
768
    background-color: #BE3F3F;
769
    border-radius: .2em;
770
    -webkit-border-radius: .2em;
771
    -moz-border-radius: .2em;
772
  }
773
​
774
  .wall .lign:nth-child(1) .brick:nth-child(1){
775
    width: 2%;
776
  }
777
​
778
  .wall .lign:nth-child(1) .brick:nth-child(25){
779
    width: 5%;
780
  }
781
​
782
  .wall .lign:nth-child(2) .brick:nth-child(1){
783
    width: 4%;
784
  }
785
​
786
  .wall .lign:nth-child(2) .brick:nth-child(2){
787
    width: 2.5%;
788
  }
789
​
790
  /*BASKET*/
791
​
792
  .wood{
793
    background-color: #C26125;
794
  }
795
​
796
  .ramp{
797
    display:block;
798
    position:absolute;
799
    width:10%;
800
    padding-top:10%;
801
    top:20%;
802
    right:20%;
803
    transform: rotate(45deg);
804
    -webkit-transform: rotate(45deg);
805
  }
806
​
807
  #contentRamp1{
808
    display: block;
809
    position: absolute;
810
    width: 7%;
811
    padding-bottom: 12%;
812
    left: 63%;
813
    top: -187%;
814
    overflow: hidden;
815
  }
816
​
817
  #contentRamp1 .ramp{
818
    display: block;
819
    position: absolute;
820
    width: 200%;
821
    padding-bottom: 24%;
822
    top: 32%;
823
    left: -40%;
824
    transform: rotate(40deg);
825
    -webkit-transform: rotate(40deg);
826
  }
827
​
828
  #contentRamp1 .ramp > .in{
829
    display: block;
830
    position: absolute;
831
    background-color: #AB4D24;
832
    width: 200%;
833
    padding-bottom: 9%;
834
    top: 24%;
835
    left: -40%;
836
  }
837
​
838
  #contentRamp2{
839
    display: block;
840
    position: absolute;
841
    width: 3%;
842
    padding-bottom: 12%;
843
    left: 77.5%;
844
    top: -187%;
845
    overflow: hidden;
846
  }
847
​
848
  #contentRamp2 .ramp{
849
    display: block;
850
    position: absolute;
851
    width: 200%;
852
    padding-bottom: 70%;
853
    top: 40%;
854
    left: -48%;
855
    transform: rotate(-40deg);
856
    -webkit-transform: rotate(-40deg);
857
  }
858
​
859
  #contentRamp2 .ramp > .in{
860
    display: block;
861
    position: absolute;
862
    background-color: #AB4D24;
863
    width: 200%;
864
    padding-bottom: 21%;
865
    top: 24%;
866
    left: -40%;
867
  }
868
​
869
  .panel{
870
    display: block;
871
    position: absolute;
872
    width: 3%;
873
    padding-bottom: 16%;
874
    top: -267%;
875
    right: 17%;
876
    overflow: hidden;
877
    z-index: 10;
878
  }
879
​
880
  .panel > .in{
881
    display: block;
882
    position: absolute;
883
    background-color: #AB4D24;
884
    width: 60%;
885
    padding-bottom: 540%;
886
    top: 0%;
887
    left: 20%;
888
  }
889
​
890
  .pylon{
891
    display: block;
892
    position: absolute;
893
    background-color: #CACACA;
894
    width: 2.6%;
895
    padding-bottom: 22%;
896
    top: -31%;
897
    right: 11%;
898
  }
899
​
900
  .pylon .in{
901
    display: block;
902
    position: absolute;
903
    background-color: #B6B6B6;
904
    width: 50%;
905
    padding-bottom: 900%;
906
    top: 0%;
907
    left: 0%;
908
  }
909
​
910
  .pylon .end{
911
    display: block;
912
    position: absolute;
913
    background-color: #CACACA;
914
    width: 120%;
915
    padding-bottom: 70%;
916
    top: 0%;
917
    right: -8%;
918
    z-index: 9;
919
  }
920
​
921
  .pylon .end + .end{
922
    top: 100%;
923
  }
924
​
925
  .pylon .end .in{
926
    display: block;
927
    position: absolute;
928
    background-color: #BEBEBE;
929
    width: 68%;
930
    padding-bottom: 58%;
931
    top: 0%;
932
    left: 0%;
933
  }
934
​
935
  .contentPylonRound{
936
    display: block;
937
    position: absolute;
938
    width: 10%;
939
    padding-bottom: 10%;
940
    top: -135%;
941
    right: 11%;
942
    z-index: 9;
943
  }
944
​
945
  .pylonRound{
946
    display: block;
947
    position: absolute;
948
    background-color: #CACACA;
949
    width: 66%;
950
    padding-bottom: 66%;
951
    top: 0%;
952
    right: 0%;
953
    -webkit-border-top-right-radius: 2.7em;
954
    -moz-border-top-right-radius: 2.7em;
955
    border-top-right-radius: 2.7em;
956
  }
957
​
958
  .pylonRound > .in{
959
    display: block;
960
    position: absolute;
961
    background-color: #B6B6B6;
962
    width: 70%;
963
    padding-bottom: 80%;
964
    top: 20%;
965
    right: 20%;
966
    -webkit-border-top-right-radius: 2em;
967
    -moz-border-top-right-radius: 2em;
968
    border-top-right-radius: 2em;
969
  }
970
​
971
  .pylonRound > .in + .in{
972
    display: block;
973
    position: absolute;
974
    background-color: #2eb5b8;
975
    width: 62%;
976
    padding-bottom: 64%;
977
    top: 39%;
978
    right: 39%;
979
    -webkit-border-top-right-radius: 1.4em;
980
    -moz-border-top-right-radius: 1.4em;
981
    border-top-right-radius: 1.4em;
982
  }
983
​
984
  .pylonRound .end{
985
    display: block;
986
    position: absolute;
987
    background-color: #CACACA;
988
    width: 48%;
989
    padding-bottom: 23%;
990
    top: 79%;
991
    right: -4%;
992
    z-index: 9;
993
  }
994
​
995
  .pylonRound .end > .in{
996
    display: block;
997
    position: absolute;
998
    background-color: #BEBEBE;
999
    width: 68%;
1000
    padding-bottom: 59%;
1001
    top: 0%;
1002
    left: 0%;
1003
  }
1004
​
1005
  .pylonRound .end + .end{
1006
    width: 30%;
1007
    padding-bottom: 50%;
1008
    top: -6%;
1009
    left: 0%;
1010
  }
1011
​
1012
  .pylonRound .end + .end > .in{
1013
    display: block;
1014
    position: absolute;
1015
    background-color: #BEBEBE;
1016
    width: 100%;
1017
    padding-bottom: 106%;
1018
    top: 37%;
1019
    left: 0%;
1020
  }
1021
​
1022
  .contentPylonRound .separate{
1023
    display: block;
1024
    position: absolute;
1025
    background-color: #B3B3B3;
1026
    width: 31%;
1027
    padding-bottom: 2%;
1028
    top: 66%;
1029
    right: -2%;
1030
    z-index: 12;
1031
  }
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

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

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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