JSDM

HTML

123
 
1
<div class="scene">
2
​
3
  <div data-launch="2000" class="aaa str">
4
    <div class="st--st st--a">
5
      <div class="st--aa1"></div>
6
      <div class="st--aa2"></div>
7
      <div class="st--aa3"></div>
8
    </div>
9
    <div class="st--st st--b">
10
      <div class="st--aa1"></div>
11
      <div class="st--aa2"></div>
12
      <div class="st--aa3"></div>
13
    </div>
14
  </div>
15
​
16
  <div data-launch="1800" class="aaa sr-rec4">
17
    <div class="sq--a"></div>
18
    <div class="sq--b"></div>
19
    <div class="sq--c">
20
      <div class="sq--cc sq--c1">
21
        <div class="sq--cc1"></div>
22
        <div class="sq--cc2"></div>
23
      </div>
24
      <div class="sq--cc sq--c2">
25
        <div class="sq--cc1"></div>
26
        <div class="sq--cc2"></div>
27
      </div>
28
      <div class="sq--cc sq--c3">
29
        <div class="sq--cc1"></div>
30
        <div class="sq--cc2"></div>
31
      </div>
32
    </div>
33
  </div>
34
​
35
  <div data-launch="1300" class="aaa sr-rec3">
36
    <div class="sq--a"></div>
37
    <div class="sq--b">
38
      <div class="sq--1"></div>
39
      <div class="sq--2"></div>
40
      <div class="sq--3"></div>
41
      <div class="sq--4"></div>
42
    </div>
43
    <div class="sq--c">
44
      <div class="sq--1"></div>
45
      <div class="sq--2"></div>
46
      <div class="sq--3"></div>
47
      <div class="sq--4"></div>
48
    </div>
49
    <div id="sq" class="sq--d">
50
      <div class="sq--dd sq--d1">
51
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
52
      </div>
53
      <div class="sq--dd sq--d2">
54
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
55
      </div>
56
      <div class="sq--dd sq--d3">
57
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
58
      </div>
59
      <div class="sq--dd sq--d4">
60
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
61
      </div>
62
    </div>
63
  </div>
64
​
65
  <div data-launch="1000" class="aaa sr-rec2">
66
    <div class="sq--a"></div>
67
    <div class="sq--b">
68
      <div class="sq--1"></div>
69
      <div class="sq--2"></div>
70
      <div class="sq--3"></div>
71
      <div class="sq--4"></div>
72
    </div>
73
    <div class="sq--c">
74
      <div class="sq--1"></div>
75
      <div class="sq--2"></div>
76
      <div class="sq--3"></div>
77
      <div class="sq--4"></div>
78
    </div>
79
    <div id="sq" class="sq--d">
80
      <div class="sq--dd sq--d1">
81
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
82
      </div>
83
      <div class="sq--dd sq--d2">
84
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
85
      </div>
86
      <div class="sq--dd sq--d3">
87
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
88
      </div>
89
      <div class="sq--dd sq--d4">
90
        <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
91
      </div>
92
    </div>
93
  </div>
94
​
95
  <div data-launch="700" class="aaa sr-rec1">
96
    <div class="sq--a">
97
      <div class="sq--1"></div>
98
      <div class="sq--2"></div>
99
      <div class="sq--3"></div>
100
      <div class="sq--4"></div>
101
    </div>
102
    <div class="sq--b">
103
      <div class="sq--1"></div>
104
      <div class="sq--2"></div>
105
      <div class="sq--3"></div>
106
      <div class="sq--4"></div>
107
    </div>
108
  </div>
109
​
110
  <div data-launch="500" class="aaa sq-logo">
111
    <div class="sq--a"></div>
112
    <div class="sq--b"></div>
113
  </div>
114
​
115
  <div data-launch="300" class="aaa logo">
116
    <div class="logo-trig"></div>
117
    <div class="logo-sqg"></div>
118
    <div class="logo-sep"></div>
119
    <div class="logo-sqd"></div>
120
    <div class="logo-trid"></div>
121
  </div>
122
​
123
</div>
!

CSS

xxxxxxxxxx
655
 
1
html {box-sizing: border-box;}
2
*, *:before, *:after {box-sizing: inherit;}
3
​
4
$bounce: cubic-bezier(0.545, 2, 0.47, 0.82);
5
​
6
// in
7
$easeInQuad       : cubic-bezier(0.550, 0.085, 0.680, 0.530);
8
$easeInCubic      : cubic-bezier(0.550, 0.055, 0.675, 0.190);
9
$easeInQuart      : cubic-bezier(0.895, 0.030, 0.685, 0.220);
10
$easeInQuint      : cubic-bezier(0.755, 0.050, 0.855, 0.060);
11
$easeInSine       : cubic-bezier(0.470, 0.000, 0.745, 0.715);
12
$easeInExpo       : cubic-bezier(0.950, 0.050, 0.795, 0.035);
13
$easeInCirc       : cubic-bezier(0.600, 0.040, 0.980, 0.335);
14
$easeInBack       : cubic-bezier(0.600, -0.280, 0.735, 0.045);
15
​
16
// out
17
$easeOutQuad      : cubic-bezier(0.250, 0.460, 0.450, 0.940);
18
$easeOutCubic     : cubic-bezier(0.215, 0.610, 0.355, 1.000);
19
$easeOutQuart     : cubic-bezier(0.165, 0.840, 0.440, 1.000);
20
$easeOutQuint     : cubic-bezier(0.230, 1.000, 0.320, 1.000);
21
$easeOutSine      : cubic-bezier(0.390, 0.575, 0.565, 1.000);
22
$easeOutExpo      : cubic-bezier(0.190, 1.000, 0.220, 1.000);
23
$easeOutCirc      : cubic-bezier(0.075, 0.820, 0.165, 1.000);
24
$easeOutBack      : cubic-bezier(0.175, 0.885, 0.320, 1.275);
25
​
26
// in out
27
$easeInOutQuad    : cubic-bezier(0.455, 0.030, 0.515, 0.955);
28
$easeInOutCubic   : cubic-bezier(0.645, 0.045, 0.355, 1.000);
29
$easeInOutQuart   : cubic-bezier(0.770, 0.000, 0.175, 1.000);
30
$easeInOutQuint   : cubic-bezier(0.860, 0.000, 0.070, 1.000);
31
$easeInOutSine    : cubic-bezier(0.445, 0.050, 0.550, 0.950);
32
$easeInOutExpo    : cubic-bezier(1.000, 0.000, 0.000, 1.000);
33
$easeInOutCirc    : cubic-bezier(0.785, 0.135, 0.150, 0.860);
34
$easeInOutBack    : cubic-bezier(0.680, -0.550, 0.265, 1.550);
35
​
36
.scene {
37
  background: radial-gradient(ellipse at center,  #fff 0%,#b5b9bf 100%);
38
  position:fixed;
39
  top:0;right:0;bottom:0;left:0;
40
  margin:auto;
41
  overflow: hidden;
42
}
43
​
44
​
45
$red:#c73226;
46
$lightblue:#354459;
47
$mediumblue:#1e2839;
48
$darkblue:#0c111f;
49
$gray:#e5e5e5;
50
​
51
​
52
@keyframes scalex {
53
  0%   {transform:scaleX(0);opacity:0;}
54
  20%  {opacity: 1;}
55
  100% {transform:scaleX(1);}
56
}
57
@keyframes scaley {
58
  0%   {transform:scaleY(0);opacity:0;}
59
  20%  {opacity: 1;}
60
  100% {transform:scaleY(1);}
61
}
62
@keyframes scale {
63
  0%   {transform:scale(0);opacity:0;}
64
  20%  {opacity: 1;}
65
  100% {transform:scale(1);}
66
}
67
​
68
.logo {
69
  width: 248px;
70
  height: 238px;
71
  position:absolute;top:0;right:0;bottom:0;left:0;
72
  margin:auto;
73
  z-index: 800;
74
  .logo-trig {
75
    position: absolute;
76
    left: 0;bottom: 0;
77
    width:0;height:0;
78
    border-right:   52px solid $lightblue;
79
    border-top:     52px solid transparent;
80
    border-bottom:  52px solid transparent;
81
    animation:logo-trig .5s .25s $easeOutQuint backwards paused;
82
  }
83
  .logo-trid {
84
    position: absolute;
85
    top: 0;right: 0;
86
    width:0;height:0;
87
    border-left:    52px solid $lightblue;
88
    border-top:     52px solid transparent;
89
    border-bottom:  52px solid transparent;
90
    animation:logo-trid .5s .5s $easeOutQuint backwards paused;
91
  }
92
  .logo-sqg {
93
    position: absolute;
94
    top:2*26px;left:62px;
95
    width: 52px;
96
    height: 186px;
97
    background: $darkblue;
98
    transform:skewY(-45deg);
99
    transform-origin:0 0;
100
    animation:logo-sq .5s $easeOutQuint backwards paused;
101
  }
102
  .logo-sqd {
103
    position: absolute;
104
    top:2*26px;right:62px;
105
    width: 52px;
106
    height: 186px;
107
    background: $darkblue;
108
    transform:skewY(-45deg);
109
    transform-origin:0 100%;
110
    animation:logo-sq .5s .25s $easeOutQuint backwards paused;
111
  }
112
  .logo-sep {
113
    position:absolute;
114
    top:104px;
115
    right:0;left:0;
116
    margin:auto;
117
    width: 6px;
118
    height: 40px;
119
    transform:skewY(-45deg);
120
    background:$lightblue;
121
    animation:logo-sq .5s .5s $easeOutQuint backwards paused;
122
  }
123
  opacity: 0;
124
  &.a {
125
    opacity: 1;
126
    .logo-trig {animation-play-state:running;}
127
    .logo-trid {animation-play-state:running;}
128
    .logo-sqg  {animation-play-state:running;}
129
    .logo-sqd  {animation-play-state:running;}
130
    .logo-sep  {animation-play-state:running;}
131
  }
132
}
133
​
134
@keyframes logo-trig {
135
  0%   {opacity:0;transform:translateY(-100px);}
136
  100% {opacity:1;transform:none;}
137
}
138
@keyframes logo-trid {
139
  0%   {opacity:0;transform:translateY(100px);}
140
  100% {opacity:1;transform:none;}
141
}
142
​
143
@keyframes logo-sq {
144
  0%   {transform:skewY(-45deg) scaleY(0);}
145
  100% {transform:skewY(-45deg) scaleY(1);}
146
}
147
​
148
​
149
​
150
​
151
​
152
​
153
.sq-logo {
154
  width:326px;
155
  height:326px;
156
  transform:rotate(45deg);
157
  position:absolute;top:0;right:0;bottom:0;left:0;
158
  margin:auto;
159
  z-index: 100;
160
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
161
  .sq--a {
162
    box-shadow: 0 0 0 10px #fff;
163
    background:$red;
164
    animation:  scalex .5s $easeInOutQuint backwards paused,
165
      sqla .4s .5s $easeInOutCubic backwards paused;
166
    transform-origin:0 0;
167
  }
168
  .sq--b {
169
    width:310px;
170
    height:310px;
171
    background:#fff;
172
    animation:scaley .4s .35s $easeInOutQuint backwards paused;
173
    transform-origin:0 0;
174
  }
175
  opacity: 0;
176
  &.a {
177
    opacity: 1;
178
    .sq--a {animation-play-state:running;}
179
    .sq--b {animation-play-state:running;}
180
  }
181
}
182
@keyframes sqla {
183
  0%   {box-shadow: 0 0 0 0 #fff;}
184
  50%  {box-shadow: 0 0 0 20px #fff;}
185
  100% {box-shadow: 0 0 0 10px #fff;}
186
}
187
​
188
​
189
​
190
​
191
.sr-rec1 {
192
  width:376px;
193
  height:376px;
194
  position:absolute;top:0;right:0;bottom:0;left:0;
195
  margin:auto;
196
  z-index: 90;
197
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
198
  .sq--a {
199
    background: $lightblue;
200
    border:28px solid $darkblue;
201
    animation:srra .75s $easeOutCubic backwards paused;
202
​
203
    div {
204
      width:28px;
205
      height:28px;
206
      background:$darkblue;
207
      position: absolute;
208
      &.sq--1 {top: 0;left: 0;}
209
      &.sq--2 {top: 0;right: 0;}
210
      &.sq--3 {right: 0;bottom: 0;}
211
      &.sq--4 {bottom: 0;left: 0;}
212
    }
213
  }
214
  .sq--b {
215
    width: 356px;
216
    height: 356px;
217
    z-index: 5;
218
    div {
219
      position:absolute;
220
      background:$lightblue;
221
    }
222
    .sq--1 {
223
      top:0;right:0;left:0;height:4px;
224
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
225
      transform-origin:0 50%;
226
    }
227
    .sq--2 {
228
      top:0;right:0;bottom:0;width:4px;
229
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
230
      transform-origin:50% 0;
231
    }
232
    .sq--3 {
233
      right:0;bottom:0;left:0;height:4px;
234
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
235
      transform-origin:100% 50%;
236
    }
237
    .sq--4 {
238
      top:0;bottom:0;left:0;width:4px;
239
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
240
      transform-origin:50% 100%;
241
    }
242
  }
243
  opacity: 0;
244
  &.a {
245
    opacity: 1;
246
    .sq--a {animation-play-state:running;}
247
    .sq--b {
248
      .sq--1 {animation-play-state:running;}
249
      .sq--2 {animation-play-state:running;}
250
      .sq--3 {animation-play-state:running;}
251
      .sq--4 {animation-play-state:running;}
252
    }
253
  }
254
}
255
@keyframes srra {
256
  0%   {transform:scale(1.5);opacity: 0;}
257
  50%  {transform:scale(.75);opacity: 1;}
258
  75%  {transform:scale(1.1);opacity: 1;}
259
  100% {transform:scale(1);opacity: 1;}
260
}
261
​
262
​
263
​
264
​
265
.sr-rec2 {
266
  width:390px;
267
  height:390px;
268
  transform:rotate(45deg);
269
  position:absolute;top:0;right:0;bottom:0;left:0;
270
  margin:auto;
271
  z-index: 80;
272
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
273
  .sq--a {
274
    background: $lightblue;
275
    animation:scalex .75s $easeOutCubic backwards paused;
276
    transform-origin:0 0;
277
  }
278
  .sq--b {
279
    div {
280
      position:absolute;
281
      background:$darkblue;
282
    }
283
    .sq--1 {
284
      top:0;right:0;left:0;height:6px;
285
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
286
      transform-origin:0 50%;
287
    }
288
    .sq--2 {
289
      top:0;right:0;bottom:0;width:6px;
290
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
291
      transform-origin:50% 0;
292
    }
293
    .sq--3 {
294
      right:0;bottom:0;left:0;height:6px;
295
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
296
      transform-origin:100% 50%;
297
    }
298
    .sq--4 {
299
      top:0;bottom:0;left:0;width:6px;
300
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
301
      transform-origin:50% 100%;
302
    }
303
  }
304
  .sq--c {
305
    width:370px;
306
    height:370px;
307
    div {
308
      position:absolute;
309
      background:$red;
310
    }
311
    .sq--1 {
312
      top:0;right:0;left:0;height:2px;
313
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
314
      transform-origin:0 50%;
315
    }
316
    .sq--2 {
317
      top:0;right:0;bottom:0;width:2px;
318
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
319
      transform-origin:50% 0;
320
    }
321
    .sq--3 {
322
      right:0;bottom:0;left:0;height:2px;
323
      animation:scalex .5s .5s $easeInOutQuint backwards paused;
324
      transform-origin:100% 50%;
325
    }
326
    .sq--4 {
327
      top:0;bottom:0;left:0;width:2px;
328
      animation:scaley .5s .5s $easeInOutQuint backwards paused;
329
      transform-origin:50% 100%;
330
    }
331
  }
332
​
333
  .sq--d {
334
    width:356px;
335
    height:356px;
336
    .sq--dd {
337
      position:absolute;
338
      width: 100%;height:100%;
339
      &.sq--d1 {transform:rotate(0deg);}
340
      &.sq--d2 {transform:rotate(90deg);}
341
      &.sq--d3 {transform:rotate(180deg);}
342
      &.sq--d4 {transform:rotate(270deg);}
343
      div {
344
        width:18px;
345
        height:18px;
346
        background:$gray;
347
        position:absolute;
348
        top:0;
349
        left:0;
350
        opacity: 0;
351
        transform:translateY(50px) scale(0);
352
        @for $i from 1 through 14 {
353
          &:nth-child(#{$i}) {
354
            transition:.5s $i*.015+.75s $bounce;
355
            left:$i*26-26px;
356
          }
357
      }
358
    }
359
  }
360
}
361
opacity: 0;
362
&.a {
363
  opacity: 1;
364
  .sq--a {animation-play-state:running;}
365
  .sq--b {
366
    .sq--1 {animation-play-state:running;}
367
    .sq--2 {animation-play-state:running;}
368
    .sq--3 {animation-play-state:running;}
369
    .sq--4 {animation-play-state:running;}
370
  }
371
  .sq--c {
372
    .sq--1 {animation-play-state:running;}
373
    .sq--2 {animation-play-state:running;}
374
    .sq--3 {animation-play-state:running;}
375
    .sq--4 {animation-play-state:running;}
376
  }
377
  .sq--d {
378
    .sq--dd {
379
      div {
380
        transform:translateY(0) scale(1);
381
        opacity: 1;
382
      }
383
    }
384
  }
385
}
386
}
387
​
388
​
389
​
390
​
391
​
392
​
393
​
394
​
395
.sr-rec3 {
396
  width:476px;
397
  height:476px;
398
  position:absolute;top:0;right:0;bottom:0;left:0;
399
  margin:auto;
400
  z-index: 70;
401
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
402
  .sq--a {
403
    background: $lightblue;
404
    animation:scalex 1s $easeOutCubic backwards paused;
405
    transform-origin:0 0;
406
  }
407
  .sq--b {
408
    div {
409
      position:absolute;
410
      background:$darkblue;
411
    }
412
    .sq--1 {
413
      top:0;right:0;left:0;height:10px;
414
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
415
      transform-origin:0 50%;
416
    }
417
    .sq--2 {
418
      top:0;right:0;bottom:0;width:10px;
419
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
420
      transform-origin:50% 0;
421
    }
422
    .sq--3 {
423
      right:0;bottom:0;left:0;height:10px;
424
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
425
      transform-origin:100% 50%;
426
    }
427
    .sq--4 {
428
      top:0;bottom:0;left:0;width:10px;
429
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
430
      transform-origin:50% 100%;
431
    }
432
  }
433
  .sq--c {
434
    width:446px;
435
    height:446px;
436
    div {
437
      position:absolute;
438
      background:$red;
439
    }
440
    .sq--1 {
441
      top:0;right:0;left:0;height:2px;
442
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
443
      transform-origin:0 50%;
444
    }
445
    .sq--2 {
446
      top:0;right:0;bottom:0;width:2px;
447
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
448
      transform-origin:50% 0;
449
    }
450
    .sq--3 {
451
      right:0;bottom:0;left:0;height:2px;
452
      animation:scalex .75s .5s $easeInOutQuint backwards paused;
453
      transform-origin:100% 50%;
454
    }
455
    .sq--4 {
456
      top:0;bottom:0;left:0;width:2px;
457
      animation:scaley .75s .5s $easeInOutQuint backwards paused;
458
      transform-origin:50% 100%;
459
    }
460
  }
461
​
462
  .sq--d {
463
    width:430px;
464
    height:430px;
465
    .sq--dd {
466
      position:absolute;
467
      width: 100%;height:100%;
468
      &.sq--d1 {transform:rotate(0deg);}
469
      &.sq--d2 {transform:rotate(90deg);}
470
      &.sq--d3 {transform:rotate(180deg);}
471
      &.sq--d4 {transform:rotate(270deg);}
472
      div {
473
        width:24px;
474
        height:24px;
475
        background:$gray;
476
        position:absolute;
477
        top:0;
478
        left:0;
479
        transform:translateY(50px) scale(0);
480
        @for $i from 1 through 15 {
481
          &:nth-child(#{$i}) {
482
            transition:.5s $i*.015+.75s $bounce;
483
            left:$i*29-29px;
484
          }
485
      }
486
    }
487
  }
488
}
489
transition: .25s $easeOutCubic;
490
opacity: 0;
491
&.a {
492
  opacity: 1;
493
  .sq--a {animation-play-state:running;}
494
  .sq--b {
495
    .sq--1 {animation-play-state:running;}
496
    .sq--2 {animation-play-state:running;}
497
    .sq--3 {animation-play-state:running;}
498
    .sq--4 {animation-play-state:running;}
499
  }
500
  .sq--c {
501
    .sq--1 {animation-play-state:running;}
502
    .sq--2 {animation-play-state:running;}
503
    .sq--3 {animation-play-state:running;}
504
    .sq--4 {animation-play-state:running;}
505
  }
506
  .sq--d {
507
    .sq--dd {
508
      div {
509
        transform:translateY(0) scale(1);
510
      }
511
    }
512
  }
513
}
514
}
515
​
516
​
517
​
518
​
519
​
520
​
521
​
522
.sr-rec4 {
523
  width:464px;
524
  height:464px;
525
  position:absolute;top:0;right:0;bottom:0;left:0;
526
  margin:auto;
527
  z-index: 60;
528
  transform:rotate(45deg);
529
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
530
  .sq--a {
531
    background: $red;
532
    animation:scalex .75s $easeInOutQuint backwards paused;
533
    transform-origin:100% 100%;
534
  }
535
  .sq--b {
536
    width:452px;
537
    height:452px;
538
    background: $mediumblue;
539
    animation:scaley .75s .5s $easeInOutQuint backwards paused;
540
    transform-origin:100% 100%;
541
  }
542
  .sq--c {
543
    width:424px;
544
    height:424px;
545
    .sq--cc {
546
      position: absolute;
547
      width: 36px;
548
      height:36px;
549
      &.sq--c1 {top:0;right:0;}
550
      &.sq--c2 {right:0;bottom:0;}
551
      &.sq--c3 {bottom:0;left:0;}
552
      .sq--cc1 {
553
        position:absolute;
554
        top:0;right:0;bottom:0;left:0;
555
        margin:auto;
556
        width:36px;
557
        height:36px;
558
        border:4px solid $red;
559
      }
560
      .sq--cc2 {
561
        position:absolute;
562
        top:0;right:0;bottom:0;left:0;
563
        margin:auto;
564
        width:20px;
565
        height:20px;
566
        background:$gray;
567
      }
568
​
569
      &.sq--c1 {
570
        .sq--cc1 {animation:scale .75s .1s $bounce backwards paused;}
571
        .sq--cc2 {animation:scale .75s .6s $bounce backwards paused;}
572
      }
573
      &.sq--c2 {
574
        .sq--cc1 {animation:scale .75s .1+.25s $bounce backwards paused;}
575
        .sq--cc2 {animation:scale .75s .6+.25s $bounce backwards paused;}
576
      }
577
      &.sq--c3 {
578
        .sq--cc1 {animation:scale .75s .1+.5s $bounce backwards paused;}
579
        .sq--cc2 {animation:scale .75s .6+.5s $bounce backwards paused;}
580
      }
581
​
582
    }
583
  }
584
  opacity: 0;
585
  &.a {
586
    opacity: 1;
587
    .sq--a {animation-play-state:running;}
588
    .sq--b {animation-play-state:running;}
589
    .sq--c {
590
      .sq--cc {
591
        .sq--cc1 {animation-play-state:running;}
592
        .sq--cc2 {animation-play-state:running;}
593
      }
594
    }
595
  }
596
}
597
​
598
​
599
​
600
​
601
​
602
​
603
​
604
​
605
​
606
.str {
607
  width:586px;
608
  height:586px;
609
  position:absolute;top:0;right:0;bottom:0;left:0;
610
  margin:auto;
611
  z-index: 50;
612
  overflow: hidden;
613
  > * {position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;}
614
  .st--st {
615
    position: absolute;
616
    top:0;right:0;
617
    width:352px;
618
    height:100%;
619
    &.st--a {transform:rotate(45deg);}
620
    &.st--b {transform:rotate(-45-90deg);}
621
    div {
622
      height: 6px;
623
      width: 100%;
624
      background:$red;
625
      position: absolute;
626
      left: 0;right: 0;
627
      transform-origin:100% 0;
628
      &:nth-child(1) {top:0;}
629
      &:nth-child(2) {top:12px;}
630
      &:nth-child(3) {top:24px;}
631
    }
632
    &.st--a {
633
      div:nth-child(1) {animation:scalex 2s 1*.1s $easeInOutQuint backwards paused;}
634
      div:nth-child(2) {animation:scalex 2s 2*.1s $easeInOutQuint backwards paused;}
635
      div:nth-child(3) {animation:scalex 2s 3*.1s $easeInOutQuint backwards paused;}
636
    }
637
    &.st--b {
638
      div:nth-child(1) {animation:scalex 2s 1*.1s $easeInOutQuint backwards paused;}
639
      div:nth-child(2) {animation:scalex 2s 2*.1s $easeInOutQuint backwards paused;}
640
      div:nth-child(3) {animation:scalex 2s 3*.1s $easeInOutQuint backwards paused;}
641
    }
642
  }
643
  opacity: 0;
644
  &.a {
645
    opacity: 1;
646
    .st--st {
647
      &.st--a {
648
        div {animation-play-state:running;}
649
      }
650
      &.st--b {
651
        div {animation-play-state:running;}
652
      }
653
    }
654
  }
655
}
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

9
 
1
var $aaa = $('.aaa');
2
$aaa.each(function(){
3
  var $self = $(this);
4
  var timing = $self.attr('data-launch');
5
​
6
  setTimeout(function(){
7
    $self.addClass('a');
8
  }, timing);
9
});
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

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