1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
| <html>
<div class="container">
<div class="cloud_box">
<svg viewBox="0 0 900 600" xmlns='http://www.w3.org/2000/svg'>
<filter id='cloudFilter' x="0" y="0" width="100%" height="100%">
<feTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='8' stitchTiles='stitch'
result="turbulence" />
</filter>
<rect width='100%' height='100%' filter='url(#cloudFilter)' />
</svg>
</div>
<div class="dragonBox">
<div class="dragon">
<svg xmlns="http://www.w3.org/2000/svg" width="300px" height="300px" viewBox="0 0 300 300" fill="black">
<g stroke="#ffd700" transform="translate(-1.5,280) scale(0.06,-0.06)">
<path class="path1" d="M3225 4509 c-97 -13 -181 -19 -272 -17 -73 2 -128 -1 -124 -5 16 -16
157 -23 274 -13 67 5 192 10 277 11 137 0 160 -2 200 -21 82 -38 141 -104 93
-104 -10 0 -72 -13 -138 -30 -66 -16 -156 -34 -200 -38 l-80 -9 71 -2 c45 -1
124 10 215 29 163 34 159 33 159 20 0 -23 -65 -81 -103 -92 -23 -7 -60 -23
-81 -37 -39 -25 -44 -26 -216 -26 -209 0 -210 0 -210 85 0 67 -19 98 -76 125
-27 13 -49 15 -88 10 -42 -5 -55 -3 -66 10 -46 55 -132 60 -261 15 -109 -38
-233 -53 -354 -45 -145 10 -347 42 -535 85 -177 39 -207 40 -184 2 15 -26 116
-71 210 -95 120 -29 109 -58 -33 -92 -78 -18 -110 -36 -99 -53 21 -34 164 -14
343 49 88 31 126 35 170 18 l28 -11 -49 -25 c-145 -74 -429 -104 -808 -85
-122 7 -251 17 -284 23 -63 12 -100 7 -89 -11 23 -37 176 -78 326 -87 109 -7
136 -16 104 -36 -11 -6 -45 -23 -75 -35 -67 -29 -102 -60 -98 -87 5 -32 31
-29 127 14 127 57 285 96 479 116 91 10 120 -20 66 -70 -31 -29 -70 -32 -169
-14 -127 24 -224 -18 -312 -136 -29 -39 -53 -73 -53 -77 0 -4 24 2 53 14 73
30 175 57 219 57 41 1 97 -37 84 -57 -9 -16 -94 -39 -185 -52 -126 -18 -191
-58 -260 -159 -21 -31 -53 -89 -70 -130 -31 -73 -76 -230 -68 -237 2 -3 29 11
58 31 135 89 263 133 418 144 149 11 210 34 288 106 64 61 98 70 133 35 48
-48 -1 -100 -105 -115 -86 -12 -126 -37 -205 -124 -83 -91 -142 -134 -212
-152 -27 -7 -48 -16 -48 -19 0 -9 112 -47 190 -65 85 -19 236 -19 314 1 81 20
123 46 247 150 167 139 271 203 332 204 22 0 27 -4 27 -24 0 -40 -121 -133
-177 -137 -37 -3 44 -17 101 -18 80 -1 182 17 231 42 22 11 67 44 100 74 69
62 189 126 269 143 49 10 67 9 143 -11 65 -17 121 -23 218 -24 117 -2 135 -5
185 -29 62 -29 134 -34 167 -11 35 25 60 106 54 180 l-3 30 -15 -35 c-27 -62
-47 -64 -146 -15 -39 19 -86 35 -104 35 -32 0 -33 1 -33 45 0 25 -3 45 -7 45
-5 -1 -17 -15 -28 -33 -11 -17 -28 -33 -37 -35 -10 -2 -44 13 -77 33 -53 33
-72 38 -176 51 -65 8 -127 19 -139 26 -59 30 -72 67 -32 93 33 22 75 33 191
51 55 8 130 24 168 36 81 26 92 20 92 -52 0 -69 16 -54 55 54 l11 29 25 -24
c18 -17 42 -26 87 -31 120 -13 162 -21 170 -32 4 -6 5 -31 2 -56 -5 -43 -5
-44 11 -25 24 30 44 81 44 114 0 16 12 62 26 102 15 42 24 84 21 102 -3 21 3
41 19 65 23 34 31 83 18 117 -11 26 -89 74 -145 87 -41 10 -62 23 -103 63 -98
99 -224 121 -481 84z m640 -204 c66 -38 80 -87 40 -139 -13 -18 -19 -18 -72
-7 -46 10 -126 46 -152 67 -2 2 10 19 27 38 17 19 33 44 37 56 6 19 12 21 43
15 21 -3 55 -17 77 -30z m-1055 -95 c12 -8 9 -15 -20 -45 -101 -104 -244 -103
-360 1 l-43 39 49 6 c82 10 358 9 374 -1z m-672 -139 c-46 -29 -78 -73 -78
-106 0 -32 33 -86 61 -100 43 -23 116 -18 177 10 28 13 52 22 52 19 0 -3 -14
-19 -30 -37 -82 -86 -35 -163 94 -155 56 3 69 9 144 61 97 69 181 109 288 137
109 28 133 24 44 -8 -79 -29 -148 -71 -190 -117 -76 -82 -209 -166 -305 -191
-179 -48 -329 52 -257 171 l19 30 -61 0 c-77 1 -122 24 -143 72 -21 52 -10 96
39 145 38 38 145 97 177 98 8 0 -6 -13 -31 -29z" />
<path class="path2" d="M1085 3794 c-57 -24 -87 -29 -325 -53 -66 -7 -103 -17 -139 -36 -119
-65 -208 -178 -218 -279 -3 -31 -4 -56 -1 -56 2 0 25 20 51 43 58 54 143 100
223 121 112 29 142 16 87 -36 -16 -14 -89 -70 -163 -125 -74 -55 -148 -114
-163 -133 -67 -80 -117 -224 -117 -340 l0 -65 38 65 c45 79 137 176 174 185
73 18 78 -35 13 -127 -160 -225 -180 -268 -173 -382 4 -58 13 -87 47 -159 24
-48 47 -90 52 -93 5 -3 9 34 9 84 0 186 50 320 88 237 15 -33 15 -160 0 -241
-14 -80 1 -176 40 -247 24 -45 113 -137 132 -137 5 0 -1 19 -12 43 -12 23 -23
61 -26 85 -4 35 -2 42 12 42 9 0 25 -13 34 -30 9 -16 20 -30 23 -30 4 0 29
-18 58 -41 69 -55 81 -100 38 -147 -33 -35 -71 -52 -119 -52 -39 0 -47 5 -113
73 -39 39 -106 116 -148 169 -110 138 -129 151 -225 151 -120 -1 -128 -2 -151
-20 -21 -18 -21 -18 36 -19 76 -1 103 -16 103 -54 0 -33 23 -53 135 -118 126
-72 123 -84 -5 -21 -141 70 -192 79 -232 43 -13 -12 -34 -25 -48 -29 -36 -10
-68 -32 -80 -55 -10 -19 -9 -19 31 -5 63 22 91 19 124 -15 21 -21 46 -33 99
-45 39 -9 116 -34 171 -56 183 -72 169 -76 -63 -19 -168 41 -192 41 -206 4 -3
-8 -6 -24 -6 -34 0 -10 -9 -21 -19 -25 -26 -8 -91 -81 -91 -101 0 -12 9 -8 35
15 44 38 80 40 108 5 20 -26 21 -26 113 -20 110 8 145 -3 234 -76 69 -57 110
-78 150 -78 42 0 63 -12 141 -82 36 -32 71 -58 77 -58 6 0 14 -17 17 -37 4
-21 8 -45 9 -53 4 -22 26 36 26 69 0 16 7 46 16 67 23 55 13 106 -31 162 -32
41 -36 52 -31 87 6 49 64 108 125 126 39 11 45 10 128 -28 49 -23 120 -51 158
-63 77 -24 238 -38 302 -25 37 8 37 8 -45 26 -284 62 -557 270 -683 521 -62
124 -83 219 -83 378 0 181 35 316 116 453 20 34 36 87 53 171 40 198 85 306
174 410 48 57 69 104 56 126 -11 18 -78 10 -140 -16z" />
<path class="path3" d="M1344 3240 c-243 -122 -374 -337 -374 -608 1 -249 128 -461 373 -619
37 -24 122 -70 190 -102 214 -101 413 -234 458 -307 41 -68 17 -125 -63 -149
-53 -15 -98 -48 -98 -71 0 -7 -11 -30 -25 -50 -19 -28 -25 -49 -24 -88 1 -50
1 -51 12 -18 5 18 25 46 44 63 31 26 39 29 81 23 27 -3 76 0 114 8 l66 14 29
-30 c16 -17 61 -59 100 -94 61 -53 74 -70 87 -116 20 -68 33 -78 93 -74 48 3
48 3 71 -42 12 -24 22 -57 22 -74 0 -28 0 -29 20 -11 28 25 26 89 -3 148 -13
25 -20 52 -17 59 17 32 -13 83 -106 178 -52 53 -94 100 -94 103 0 9 189 -77
255 -117 69 -42 112 -46 161 -15 l34 21 28 -21 c15 -11 37 -36 47 -55 26 -49
39 -45 32 10 -3 30 -15 58 -36 84 -17 21 -31 50 -31 64 0 36 -50 72 -117 86
-115 23 -198 43 -212 50 -22 11 83 21 200 19 114 -3 154 9 185 56 20 31 55 32
101 4 l35 -22 -16 31 c-16 31 -61 62 -89 62 -7 0 -23 14 -35 30 -33 44 -82 41
-234 -17 -118 -45 -128 -47 -228 -48 -122 0 -171 18 -205 73 -11 18 -34 51
-52 73 -51 64 -39 74 141 109 158 30 251 64 436 158 210 107 348 164 497 204
108 29 131 31 278 32 146 1 165 -1 220 -23 79 -32 158 -109 175 -171 17 -62 8
-139 -21 -197 -20 -39 -36 -54 -87 -81 -37 -20 -70 -31 -81 -27 -24 7 -137
169 -191 273 -44 85 -78 122 -112 122 -11 0 -42 7 -69 16 -37 12 -58 14 -82 7
l-32 -10 44 -12 c67 -19 81 -31 81 -71 0 -30 12 -46 93 -129 96 -98 91 -97
-36 6 -85 69 -125 83 -162 59 -13 -9 -40 -16 -59 -16 -19 0 -44 -9 -57 -20
l-24 -19 57 -1 c51 0 59 -3 78 -29 11 -17 55 -48 98 -71 82 -44 217 -138 209
-146 -3 -3 -64 24 -136 60 -72 36 -141 66 -154 66 -16 0 -28 -9 -35 -26 -7
-14 -29 -32 -50 -40 -38 -16 -82 -51 -82 -66 0 -5 13 -2 30 7 42 21 87 20 95
-4 10 -32 32 -43 106 -51 85 -9 103 -21 182 -118 42 -51 67 -74 95 -83 47 -15
74 -39 123 -111 22 -32 45 -58 51 -58 7 0 9 -16 4 -47 l-6 -48 20 25 c11 14
20 34 20 45 0 11 7 29 15 39 22 28 18 67 -10 128 -14 29 -25 65 -25 79 0 38
35 77 82 91 36 11 42 10 54 -7 24 -32 28 -86 15 -197 -6 -59 -14 -115 -17
-125 -12 -41 32 48 63 126 61 155 87 281 88 421 0 150 -21 232 -87 330 -86
130 -209 189 -410 197 -235 10 -559 -64 -892 -206 -66 -28 -122 -49 -124 -47
-2 3 36 30 84 62 193 127 396 214 594 254 84 17 312 48 375 51 11 0 -11 9 -50
20 -152 42 -390 33 -596 -21 -40 -10 -75 -17 -78 -15 -7 8 141 71 227 99 124
39 202 49 336 43 271 -11 497 -135 640 -351 111 -166 146 -303 127 -489 -26
-261 -139 -533 -322 -777 -130 -172 -360 -387 -537 -502 -34 -23 -61 -43 -58
-45 8 -8 172 60 254 105 117 65 241 161 360 278 56 56 102 98 102 94 0 -18
-100 -140 -176 -215 -213 -212 -481 -361 -799 -444 -246 -65 -576 -71 -872
-16 -82 15 104 -38 209 -59 239 -49 440 -56 608 -21 75 16 89 12 36 -10 -82
-34 -238 -64 -351 -66 l-60 -1 40 -10 c65 -16 394 -2 509 21 278 57 514 162
710 315 82 64 191 173 235 235 l24 34 -66 -37 c-72 -41 -129 -46 -135 -14 -2
11 57 79 165 191 183 189 255 277 333 407 57 97 139 297 171 421 13 46 27 90
32 97 21 27 102 6 129 -32 4 -6 8 -50 8 -97 0 -76 4 -94 30 -147 39 -78 50
-85 50 -29 0 30 6 51 21 68 34 39 39 64 39 195 0 121 1 129 45 264 77 233 95
380 54 421 -17 17 -20 30 -17 67 3 26 8 56 12 67 6 14 -1 11 -22 -11 -18 -20
-33 -48 -37 -73 -4 -25 -12 -41 -21 -41 -16 0 -21 -20 -29 -125 -3 -44 -12
-105 -19 -135 -14 -54 -14 -53 -15 91 -1 138 -2 147 -24 171 -13 14 -30 47
-37 74 -7 27 -16 53 -21 58 -11 13 -31 -71 -24 -104 4 -17 2 -31 -5 -35 -8 -5
-10 -52 -6 -164 6 -170 0 -163 -33 42 -10 65 -22 121 -25 125 -4 3 -12 0 -18
-6 -20 -20 -25 -14 -43 49 -21 75 -41 67 -38 -17 1 -29 -2 -54 -8 -54 -18 0
-9 -55 22 -134 16 -43 33 -100 36 -126 7 -61 8 -62 70 -94 59 -30 123 -90 123
-118 0 -24 -12 -23 -36 3 -10 12 -49 38 -85 60 -129 75 -177 167 -225 429 -14
74 -36 158 -48 186 -46 101 -130 158 -251 170 -36 4 -65 10 -65 14 0 15 47 48
77 55 47 10 142 -21 199 -64 27 -20 64 -61 82 -91 l34 -55 -4 75 c-10 160
-101 269 -271 322 -86 27 -246 26 -346 -2 -80 -23 -94 -29 -251 -112 -112 -59
-150 -73 -181 -63 -46 15 -4 90 79 144 75 48 156 72 267 80 l100 7 -60 28
c-109 50 -199 70 -320 70 -128 1 -190 -12 -300 -64 -129 -59 -226 -146 -347
-310 -68 -93 -90 -113 -120 -108 -18 2 -24 10 -26 37 -8 78 64 186 161 241
l49 28 -58 12 c-215 45 -441 -82 -616 -346 -73 -109 -103 -133 -150 -115 -32
12 -58 48 -58 80 0 37 74 102 145 128 l60 22 -76 0 c-97 1 -178 -23 -284 -85
-210 -124 -237 -131 -322 -89 -127 63 -212 213 -214 375 l0 65 -16 -40 c-23
-62 -28 -217 -9 -299 50 -212 200 -365 416 -423 50 -14 101 -18 225 -17 187 1
288 19 497 89 73 24 134 42 137 40 6 -7 -169 -87 -257 -119 -405 -145 -790
-94 -993 132 -160 180 -197 503 -82 714 29 53 106 139 158 176 47 34 14 26
-71 -18z" />
<path class="path4" d="M290 1250 c0 -20 52 -148 86 -210 72 -130 177 -237 272 -277 20 -8
106 -33 191 -54 85 -21 181 -51 215 -67 140 -66 181 -172 65 -172 -69 0 -225
58 -301 112 -34 23 -34 20 -7 -35 77 -149 267 -329 444 -419 253 -129 518
-158 838 -91 82 17 101 33 39 33 -106 0 -317 78 -390 145 -72 64 -51 105 55
105 l46 0 -112 67 c-188 115 -270 192 -240 229 17 21 86 17 151 -10 54 -22
209 -122 285 -183 l33 -26 -6 45 c-17 123 74 119 265 -11 42 -29 61 -37 61
-27 0 41 -69 198 -121 276 -112 167 -255 266 -468 322 -82 21 -381 39 -381 22
0 -5 24 -19 54 -32 84 -36 218 -118 251 -152 29 -31 29 -32 11 -46 -31 -22
-101 -17 -160 12 -30 14 -114 71 -187 126 -268 199 -315 217 -589 228 -210 8
-252 17 -345 69 -30 17 -55 27 -55 21z" />
<path class="path5" d="M3673 1091 c-170 -49 -317 -156 -422 -308 l-22 -32 104 49 c118 57
193 73 203 45 15 -37 -33 -62 -201 -104 -188 -48 -310 -103 -397 -181 -32 -28
-58 -56 -58 -62 0 -7 5 -6 14 1 18 15 161 67 206 75 70 12 79 -34 14 -74 -63
-39 -130 -51 -314 -55 -148 -3 -190 -8 -273 -30 -54 -14 -115 -32 -135 -41
-59 -25 -192 -54 -252 -55 -76 -1 -34 -13 104 -29 140 -17 390 -8 514 19 206
44 414 133 575 248 161 114 345 321 448 501 l29 52 -37 -1 c-21 0 -66 -8 -100
-18z" />
</g>
</svg>
</div>
<div class="noise">
<svg viewBox="0 0 450 450" xmlns='http://www.w3.org/2000/svg'>
<filter id='noiseFilter' x="0" y="0" width="100%" height="100%">
<feTurbulence type='fractalNoise' baseFrequency='0.35' numOctaves='3' stitchTiles='stitch'
result="turbulence" />
</filter>
<rect width='100%' height='100%' filter='url(#noiseFilter)' />
</svg>
</div>
</div>
<div class="zi">
<svg class="zisvg long" viewBox="0 0 180 180">
<text text-anchor="middle" x="50%" y="80%">龙</text>
</svg>
<svg class="zisvg nian" viewBox="0 0 180 180">
<text text-anchor="middle" x="50%" y="80%">年</text>
</svg>
<svg class="zisvg da" viewBox="0 0 180 180">
<text text-anchor="middle" x="50%" y="80%">大</text>
</svg>
<svg class="zisvg ji" viewBox="0 0 180 180">
<text text-anchor="middle" x="50%" y="80%">吉</text>
</svg>
</div>
<div class="gai">
<svg viewBox="0 0 900 600" xmlns='http://www.w3.org/2000/svg'>
<filter id='Filter' x="0" y="0" width="100%" height="100%">
<feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='8' stitchTiles='stitch'
result="turbulence" />
</filter>
<rect width='100%' height='100%' filter='url(#Filter)' />
</svg>
</div>
</div>
</html>
<style>
*,
*::before,
*::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
@font-face {
font-family: "mizfont";
src: url("https://apifontaaa.51miz.com:8081/createfont/b1mZR3/woff?str=@9f99!@5e74!@5927!@5409!") format("woff"),
}
:root{
--w: 100px;
--h: 50px;
--color1: #fad2d0;
--color2: #ff0606;
--bg: linear-gradient(30deg,var(--color1) 0,var(--color1) 30%,transparent 30%)
,linear-gradient(-30deg,var(--color1) 0,var(--color1) 30%,transparent 30%)
,radial-gradient( at center bottom
,var(--color2) 0%,var(--color1) 2%
,var(--color1) 2%,var(--color1) 6%
,var(--color2) 6%,var(--color2) 8%
,var(--color1) 8%,var(--color1) 12%
,var(--color2) 12%,var(--color2) 15%
,var(--color1) 15%,var(--color1) 19%
,var(--color2) 19%,var(--color2) 23%
,var(--color1) 23%,var(--color1) 28%
,var(--color2) 28%,var(--color2) 32%
,var(--color1) 32%,var(--color1) 37%
,var(--color2) 37%,var(--color2) 42%
,var(--color1) 42%,var(--color1) 48%
,var(--color2) 48%,var(--color2) 54%
,var(--color1) 54%,var(--color1) 61%
,var(--color2) 61%,var(--color2) 70%
,var(--color1) 70%,var(--color1) 100%);
}
body{
margin: 0;
padding: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 900px;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.cloud_box {
background: var(--bg);
background-size: var(--w) var(--h);
background-position: var(--w) var(--h);
border-radius: 12px;
height: 100%;
width: 100%;
left: 0;
top:0;
position: absolute;
}
.cloud_box svg{
height: 100%;
width: 100%;
position: relative;
}
.cloud_box::before{
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
background: var(--bg);
background-size: var(--w) var(--h);
background-position: calc(var(--w) / 2) calc(var(--h) / 2);
mix-blend-mode: darken;
}
.dragonBox{
height: 400px;
width: 400px;
margin: 50px 0 20px;
display: flex;
justify-content: center;
align-items: center;
}
.noise{
height: 350px;
width: 350px;
position: absolute;
transform: rotate(45deg);
background-color: var(--color2);
mix-blend-mode: multiply;
}
.dragon {
width: 300px;
height: 300px;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.dragon svg {
width: 100%;
height: 100%;
}
.dragon svg path {
stroke-width: 60;
fill-opacity: 0;
}
.path1,.path2 {
stroke-dasharray: 20000;
stroke-dashoffset: 20000;
}
.path3 {
stroke-dasharray: 50000;
stroke-dashoffset: 50000;
}
.path4,.path5 {
stroke-dasharray: 10000;
stroke-dashoffset: 10000;
}
.animation {
animation: line 6s linear forwards, fill 2s linear forwards 6s;
}
@keyframes line {
to {
stroke-dashoffset: 0;
}
}
@keyframes fill {
to {
fill-opacity: 1;
}
}
.zi {
position: absolute;
display: flex;
height: 100%;
width: 100%;
align-items: center;
font-family: mizfont;
font-size: 180px;
isolation: isolate;
}
.zisvg {
position: absolute;
display: block;
width: 200px;
height: 200px;
scale: 0;
margin: 0 auto;
animation: zianimation 1s linear forwards;
stroke:#ef8300;
stroke-width: 4;
}
.long{
left: 50px;
top: 50px;
animation-delay: 8s;
}
.nian{
left: 50px;
bottom: 50px;
animation-delay: 9s;
}
.da{
right: 50px;
top: 50px;
animation-delay: 10s;
}
.ji{
right: 50px;
bottom: 50px;
animation-delay: 11s;
}
@keyframes zianimation {
0% {
scale: 0;
}
70% {
scale: 1.5;
}
100% {
scale: 1;
}
}
.gai{
height: 600px;
width: 900px;
position: absolute;
left: 0;
top: 0;
mix-blend-mode: multiply;
}
.rainbow{
width: 70px;
height: 70px;
position: absolute;
top: 40px;
left: 415px;
border-radius: 80px 0 0 0;
box-shadow: #fb323c -2px -2px 0 2px,
#f99716 -4px -4px 0 4px,
#fee124 -6px -6px 0 6px,
#afde2e -8px -8px 0 8px,
#6ad7f8 -10px -10px 0 10px,
#60b1f5 -12px -12px 0 12px,
#a3459b -14px -14px 0 14px;
animation: rainbow 5s ease-in-out infinite;
transform: rotate(40deg);
}
@keyframes rainbow{
50%{
transform: rotate(50deg);
}
}
.rainbow::after{
content: '';
width: 120px;
height: 15px;
position: absolute;
bottom: -23px;
left: 17px;
background: #000;
border-radius: 50%;
opacity: 0.2;
animation: rainbow_shadow 5s ease-in-out infinite;
transform: rotate(-40deg);
transform-origin: 50% 50%;
}
@keyframes rainbow_shadow{
50%{
transform: rotate(-50deg) translate(10px) scale(0.7);
opacity: 0.05;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const btn = document.querySelector('.title')
fillDragon()
btn.addEventListener('click', () => {
clearDragon()
})
})
function fillDragon() {
const paths = document.querySelectorAll('.dragon path')
paths.forEach(path => {
path.classList.add('animation')
})
}
function clearDragon() {
const paths = document.querySelectorAll('.dragon path')
paths.forEach(path => {
path.classList.remove('animation')
})
setTimeout(() => {
fillAnimation()
}, 500)
}
function fillRainbow() {
const num = 4
const box = document.getElementsByClassName('container')[0]
const itemrange = [box.clientWidth/2 - 40, box.clientHeight/2 - 40]
for(let i = 0; i< num; i++) {
const rainbow = document.createElement('div')
rainbow.classList.add('rainbow')
const itemrange = [box.clientWidth/2, box.clientHeight/2]
rainbow.style.left = Math.floor(Math.random() * itemrange[0]) + (i % 2 === 0 ? box.clientWidth/2 : 0) + 40 + 'px'
rainbow.style.top = Math.floor(Math.random() * itemrange[1]) + (i % 2 !== 0 ? box.clientHeight/2 : 0) + 40 + 'px'
console.log(rainbow.style.left, rainbow.style.top)
box.appendChild(rainbow)
}
}
</script>
|
