CSS100Day(9)-纯元素制作雨滴下到地面

1
<div class="frame">
2
    <div class="moon">
3
        <div class="crater-1"></div>
4
        <div class="crater-2"></div>
5
        <div class="crater-3"></div>
6
        <div class="crater-4"></div>
7
        <div class="crater-5"></div>
8
        <div class="crater-6"></div>
9
        <div class="crater-7"></div>
10
        <div class="crater-8"></div>
11
        <div class="crater-9"></div>
12
        <div class="crater-10"></div>
13
        <div class="crater-11"></div>
14
    </div>
15
    <div class="hill-bg-1"></div>
16
    <div class="hill-bg-2"></div>
17
    <div class="hill-fg-1"></div>
18
    <div class="hill-fg-2"></div>
19
    <div class="hill-fg-3"></div>
20
    <div class="front">
21
        <div class="temperature">12°</div>
22
        <div class="info">
23
            风力: 东 2 km/h <br />
24
            湿度: 87%
25
        </div>
26
        <table class="preview">
27
            <tr>
28
                <td>星期二</td>
29
                <td>28°/19°</td>
30
            </tr>
31
            <tr>
32
                <td>星期三</td>
33
                <td>30°/19°</td>
34
            </tr>
35
        </table>
36
    </div>
37
    <div class="drop-big-1"></div>
38
    <div class="drop-big-2"></div>
39
    <div class="drop-big-3"></div>
40
    <div class="drop-big-4"></div>
41
    <div class="drop-big-5"></div>
42
    <div class="drop-big-6"></div>
43
    <div class="drop-big-7"></div>
44
    <div class="drop-big-8"></div>
45
    <div class="drop-big-9"></div>
46
    <div class="drop-big-10"></div>
47
    <div class="drop-medium-1"></div>
48
    <div class="drop-medium-2"></div>
49
    <div class="drop-medium-3"></div>
50
    <div class="drop-medium-4"></div>
51
    <div class="drop-medium-5"></div>
52
    <div class="drop-medium-6"></div>
53
    <div class="drop-medium-7"></div>
54
    <div class="drop-medium-8"></div>
55
    <div class="drop-medium-9"></div>
56
    <div class="drop-medium-10"></div>
57
    <div class="drop-small-1"></div>
58
    <div class="drop-small-2"></div>
59
    <div class="drop-small-3"></div>
60
    <div class="drop-small-4"></div>
61
    <div class="drop-small-5"></div>
62
    <div class="drop-small-6"></div>
63
    <div class="drop-small-7"></div>
64
    <div class="drop-small-8"></div>
65
    <div class="drop-small-9"></div>
66
    <div class="drop-small-10"></div>
67
</div>

1
:root {
2
    --drop-color: #7fc1f9;
3
    --big-space-base: -20px;
4
}
5

6
.frame {
7
    width: 400px;
8
    height: 400px;
9
    border-radius: 2px;
10
    box-shadow: 1px 2px 10px 0 rgba(0, 0, 0, 0.3);
11
    font-weight: 300;
12
    overflow: hidden;
13
    background: #1a2238;
14
    position: relative;
15
    color: #394568;
16
}
17

18
.moon {
19
    position: absolute;
20
    width: 67px;
21
    height: 67px;
22
    background: #f6edbd;
23
    top: 60px;
24
    left: 66px;
25
    border-radius: 50%;
26
    animation: rise 1s ease-out;
27
    overflow: hidden;
28
}
29

30
.crater-1 {
31
    position: absolute;
32
    width: 11px;
33
    height: 11px;
34
    top: 9px;
35
    left: 28px;
36
    border-radius: 10px;
37
    background: #ece1a8;
38
}
39

40
.crater-2 {
41
    &:extend(.crater-1);
42
    top: 12px;
43
    left: 0;
44
}
45

46
.crater-3 {
47
    &:extend(.crater-1);
48
    top: 56px;
49
    left: 10px;
50
}
51

52
.crater-4 {
53
    &:extend(.crater-1);
54
    width: 6px;
55
    height: 6px;
56
    top: 37px;
57
    left: 49px;
58
}
59

60
.crater-5 {
61
    &:extend(.crater-4);
62
    top: 24px;
63
    left: 61px;
64
}
65

66
.crater-6 {
67
    &:extend(.crater-4);
68
    top: 55px;
69
    left: 33px;
70
}
71

72
.crater-7 {
73
    &:extend(.crater-4);
74
    top: 17px;
75
    left: 46px;
76
}
77

78
.crater-8 {
79
    &:extend(.crater-4);
80
    top: 28px;
81
    left: 27px;
82
}
83

84
.crater-9 {
85
    &:extend(.crater-4);
86
    top: 39px;
87
    left: 17px;
88
}
89

90
.crater-10 {
91
    &:extend(.crater-1);
92
    width: 4px;
93
    height: 4px;
94
    top: 25px;
95
    left: 15px;
96
}
97

98
.crater-11 {
99
    &:extend(.crater-10);
100
    top: 37px;
101
    left: 37px;
102
}
103

104
.front {
105
    position: absolute;
106
    z-index: 10;
107
    width: 100%;
108
    height: 90px;
109
    left: 0px;
110
    bottom: 0px;
111
    background: #fff;
112
    display: flex;
113
    justify-content: space-between;
114
    align-items: center;
115

116
    .temperature {
117
        line-height: 90px;
118
        font-size: 2rem;
119
        padding: 10px;
120
        margin: 0 10px;
121
    }
122

123
    .info {
124
        flex: 1;
125
    }
126

127
    .preview {
128
        float: right;
129
        font-weight: 400;
130
        text-align: right;
131
        font-size: 15px;
132
        line-height: 20px;
133
        margin-right: 25px;
134
    }
135
}
136

137
.hill-bg-1 {
138
    position: absolute;
139
    z-index: 2;
140
    width: 337px;
141
    height: 281px;
142
    top: 201px;
143
    left: -57px;
144
    background-color: #26314f;
145
    border-radius: 50%;
146
}
147

148
.hill-bg-2 {
149
    &:extend(.hill-bg-1);
150
    top: 197px;
151
    left: 177px;
152
}
153

154
.hill-fg-1 {
155
    &:extend(.hill-bg-1);
156
    background: #303c5d;
157
    top: 248px;
158
    left: -137px;
159
}
160

161
.hill-fg-2 {
162
    &:extend(.hill-fg-1);
163
    top: 221px;
164
    left: 63px;
165
}
166

167
.hill-fg-3 {
168
    &:extend(.hill-fg-1);
169
    top: 248px;
170
    left: 292px;
171
}
172

173
// 下雨特效
174
.drop-big-1 {
175
    position: absolute;
176
    z-index: 20;
177
    background: var(--drop-color);
178
    width: 8px;
179
    height: 8px;
180
    border-radius: 50%;
181
    animation: drop 0.8s linear 0s infinite;
182
    transform-origin: 50% 100%;
183
    left: calc(var(--big-space-base) + 38 * 1px);
184
    bottom: 90px;
185
    animation-fill-mode: both;
186

187
    &::before {
188
        position: absolute;
189
        content: "";
190
        display: block;
191
        top: -2px;
192
        left: 1px;
193
        width: 6px;
194
        height: 6px;
195
        background: var(--drop-color);
196
        border-radius: 3px;
197
    }
198

199
    &::after {
200
        position: absolute;
201
        content: "";
202
        display: block;
203
        top: -5px;
204
        left: 2px;
205
        width: 4px;
206
        height: 10px;
207
        background: var(--drop-color);
208
        border-radius: 50%;
209
    }
210
}
211

212
.drop-big-2 {
213
    &:extend(.drop-big-1 all);
214
    left: calc(var(--big-space-base) + 38 * 2px);
215
    animation: drop 0.8s linear 1s infinite;
216
    animation-fill-mode: both;
217
}
218

219
// animation-duration 0.7~0.9s animation-delay 0~2s
220
.drop-big-3 {
221
    &:extend(.drop-big-1 all);
222

223
    left: calc(var(--big-space-base) + 38 * 3px);
224
    animation: drop 0.9s linear 0.16s infinite;
225
    animation-fill-mode: both;
226
}
227

228
.drop-big-4 {
229
    &:extend(.drop-big-1 all);
230

231
    left: calc(var(--big-space-base) + 38 * 4px);
232
    animation: drop 0.74s linear 0.9s infinite;
233
    animation-fill-mode: both;
234
}
235

236
.drop-big-5 {
237
    &:extend(.drop-big-1 all);
238

239
    left: calc(var(--big-space-base) + 38 * 5px);
240
    animation: drop 0.77s linear 1.3s infinite;
241
    animation-fill-mode: both;
242
}
243

244
.drop-big-6 {
245
    &:extend(.drop-big-1 all);
246

247
    left: calc(var(--big-space-base) + 38 * 6px);
248
    animation: drop 0.89s linear 1.8s infinite;
249
    animation-fill-mode: both;
250
}
251

252
.drop-big-7 {
253
    &:extend(.drop-big-1 all);
254

255
    left: calc(var(--big-space-base) + 38 * 7px);
256
    animation: drop 0.81s linear 0.5s infinite;
257
    animation-fill-mode: both;
258
}
259

260
.drop-big-8 {
261
    &:extend(.drop-big-1 all);
262

263
    left: calc(var(--big-space-base) + 38 * 8px);
264
    animation: drop 0.76s linear 1.6s infinite;
265
    animation-fill-mode: both;
266
}
267

268
.drop-big-9 {
269
    &:extend(.drop-big-1 all);
270

271
    left: calc(var(--big-space-base) + 38 * 9px);
272
    animation: drop 0.86s linear 0.4s infinite;
273
    animation-fill-mode: both;
274
}
275

276
.drop-big-10 {
277
    &:extend(.drop-big-1 all);
278

279
    left: calc(var(--big-space-base) + 38 * 10px);
280
    animation: drop 0.82s linear 1.1s infinite;
281
    animation-fill-mode: both;
282
}
283

284
.drop-medium-1 {
285
    &:extend(.drop-big-1 all);
286
    left: calc(var(--big-space-base) + 38 * 1px);
287
    opacity: 0.6;
288
    width: 6px;
289
    height: 6px;
290
    animation: drop 1.3s linear 1s infinite;
291
    animation-fill-mode: both;
292

293
    &::before {
294
        top: -2px;
295
        left: 1px;
296
        width: 4px;
297
        height: 4px;
298
    }
299

300
    &::after {
301
        top: -4px;
302
        left: 2px;
303
        width: 2px;
304
        height: 6px;
305
    }
306
}
307

308
.drop-medium-2 {
309
    &:extend(.drop-medium-1 all);
310
    left: calc(var(--big-space-base) + 38 * 2px);
311
    animation: drop 1.4s linear 0.7s infinite;
312
    animation-fill-mode: both;
313
}
314

315
.drop-medium-3 {
316
    &:extend(.drop-medium-1 all);
317

318
    left: calc(var(--big-space-base) + 38 * 3px);
319
    animation: drop 1.5s linear 0.3s infinite;
320
    animation-fill-mode: both;
321
}
322

323
.drop-medium-4 {
324
    &:extend(.drop-medium-1 all);
325

326
    left: calc(var(--big-space-base) + 38 * 4px);
327
    animation: drop 1.32s linear 0.7s infinite;
328
    animation-fill-mode: both;
329
}
330

331
.drop-medium-5 {
332
    &:extend(.drop-medium-1 all);
333

334
    left: calc(var(--big-space-base) + 38 * 5px);
335
    animation: drop 1.48s linear 1.1s infinite;
336
    animation-fill-mode: both;
337
}
338

339
.drop-medium-6 {
340
    &:extend(.drop-medium-1 all);
341

342
    left: calc(var(--big-space-base) + 38 * 6px);
343
    animation: drop 1.37s linear 0.5s infinite;
344
    animation-fill-mode: both;
345
}
346

347
.drop-medium-7 {
348
    &:extend(.drop-medium-1 all);
349

350
    left: calc(var(--big-space-base) + 38 * 7px);
351
    animation: drop 1.45s linear 1.8s infinite;
352
    animation-fill-mode: both;
353
}
354

355
.drop-medium-8 {
356
    &:extend(.drop-medium-1 all);
357

358
    left: calc(var(--big-space-base) + 38 * 8px);
359
    animation: drop 1.42s linear 1.1s infinite;
360
    animation-fill-mode: both;
361
}
362

363
.drop-medium-9 {
364
    &:extend(.drop-medium-1 all);
365

366
    left: calc(var(--big-space-base) + 38 * 9px);
367
    animation: drop 1.35s linear 1.2s infinite;
368
    animation-fill-mode: both;
369
}
370

371
.drop-medium-10 {
372
    &:extend(.drop-medium-1 all);
373

374
    left: calc(var(--big-space-base) + 38 * 10px);
375
    animation: drop 1.5s linear 0.4s infinite;
376
    animation-fill-mode: both;
377
}
378

379
.drop-small-1 {
380
    &:extend(.drop-big-1 all);
381
    left: calc(var(--big-space-base) + 38 * 1px);
382
    opacity: 0.3;
383
    width: 4px;
384
    height: 4px;
385
    animation: drop 1.9s linear 1s infinite;
386
    animation-fill-mode: both;
387

388
    &::before {
389
        top: -2px;
390
        left: 1px;
391
        width: 2px;
392
        height: 2px;
393
    }
394

395
    &::after {
396
        top: -3px;
397
        left: 1px;
398
        width: 2px;
399
        height: 4px;
400
    }
401
}
402

403
.drop-small-2 {
404
    &:extend(.drop-small-1 all);
405
    left: calc(var(--big-space-base) + 38 * 2px);
406
    animation: drop 1.98s linear 0.7s infinite;
407
    animation-fill-mode: both;
408
}
409

410
.drop-small-3 {
411
    &:extend(.drop-small-1 all);
412

413
    left: calc(var(--big-space-base) + 38 * 3px);
414
    animation: drop 2.08s linear 1.3s infinite;
415
    animation-fill-mode: both;
416
}
417

418
.drop-small-4 {
419
    &:extend(.drop-small-1 all);
420

421
    left: calc(var(--big-space-base) + 38 * 4px);
422
    animation: drop 1.92s linear 1.7s infinite;
423
    animation-fill-mode: both;
424
}
425

426
.drop-small-5 {
427
    &:extend(.drop-small-1 all);
428

429
    left: calc(var(--big-space-base) + 38 * 5px);
430
    animation: drop 2.01s linear 0.1s infinite;
431
    animation-fill-mode: both;
432
}
433

434
.drop-small-6 {
435
    &:extend(.drop-small-1 all);
436

437
    left: calc(var(--big-space-base) + 38 * 6px);
438
    animation: drop 1.98s linear 1.7s infinite;
439
    animation-fill-mode: both;
440
}
441

442
.drop-small-7 {
443
    &:extend(.drop-small-1 all);
444

445
    left: calc(var(--big-space-base) + 38 * 7px);
446
    animation: drop 2.1s linear 0.8s infinite;
447
    animation-fill-mode: both;
448
}
449

450
.drop-small-8 {
451
    &:extend(.drop-small-1 all);
452

453
    left: calc(var(--big-space-base) + 38 * 8px);
454
    animation: drop 1.42s linear 0.1s infinite;
455
    animation-fill-mode: both;
456
}
457

458
.drop-small-9 {
459
    &:extend(.drop-small-1 all);
460

461
    left: calc(var(--big-space-base) + 38 * 9px);
462
    animation: drop 1.95s linear 1.9s infinite;
463
    animation-fill-mode: both;
464
}
465

466
.drop-small-10 {
467
    &:extend(.drop-small-1 all);
468

469
    left: calc(var(--big-space-base) + 38 * 10px);
470
    animation: drop 2.09s linear 1.4s infinite;
471
    animation-fill-mode: both;
472
}
473

474
@keyframes drop {
475
    0% {
476
        transform: translate3d(40px, -320px, 0) scaleX(1) scaleY(1) rotate(17deg);
477
    }
478

479
    85% {
480
        transform: translate3d(0, 0, 0) scaleX(1) scaleY(1) rotate(17deg);
481
    }
482

483
    100% {
484
        transform: translate3d(0, 0, 0) scaleX(3) scaleY(0) rotate(0deg);
485
    }
486
}
487

488
@keyframes rise {
489
    0% {
490
        transform: translate(-10px, 220px);
491
    }
492

493
    100% {
494
        transform: translate(0, 0);
495
    }
496
}