| blob | c9011c357676e9d9ead102976eac061e601c0775 |
2 <html>
3 <head>
5 <style>
6 div, body {
7 margin: 0;
8 padding: 0;
9 }
11 img {
12 user-select: none;
13 }
15 html {
16 width: 100vw;
17 height: 100vh;
18 overflow: hidden;
19 }
21 #picture {
23 overflow: hidden;
24 height: calc(90 * var(--unit));
25 }
27 #picture h1 {
28 font-size: var(--unit);
29 }
31 #picture>*, .smile, .eyes, .center {
32 margin-left: auto;
33 margin-right: auto;
34 }
36 .flower {
37 position: relative;
38 top: calc(-75 * var(--unit));
39 width: calc(30 * var(--unit));
40 height: calc(30 * var(--unit));
41 }
43 .flower>* {
44 position: relative;
45 width: 0;
46 height: 0;
47 }
49 .center {
50 top: calc(15 * var(--unit));
52 animation-name: center-appear;
53 animation-duration: 0.4s;
54 animation-fill-mode: both;
55 }
57 .center::before {
58 content: "";
59 display: block;
60 width: calc(3 * var(--unit));
61 height: calc(3 * var(--unit));
62 background-color: orange;
63 border-radius: calc(1.5 * var(--unit));
64 position: relative;
65 top: calc(-1.5 * var(--unit));
66 left: calc(-1.5 * var(--unit));
67 }
69 @keyframes center-appear {
70 0% {
71 transform: scale(0);
72 }
74 100% {
75 transform: scale(1);
76 }
77 }
79 .petal {
80 top: calc(14.7 * var(--unit));
81 left: calc(15 * var(--unit));
82 }
84 .petal * {
85 width: calc(var(--subunit) * var(--unit));
86 animation-duration: 10s;
87 animation-timing-function: ease-out;
88 animation-fill-mode: both;
89 }
91 .petal>*{
92 position: relative;
93 top: calc(-3 * var(--subunit) * var(--unit));
94 left: calc(-0.5 * var(--subunit) * var(--unit));
97 animation-name: petal-rotate;
98 }
101 position: relative;
103 animation-delay: inherit;
104 animation-name: petal-come-close;
105 }
107 @keyframes petal-rotate {
108 0% {
109 transform: rotate(0deg);
110 }
112 100% {
113 transform: rotate(var(--end-deg));
114 }
115 }
117 @keyframes petal-come-close {
118 0% {
119 bottom: calc(15 * var(--unit));
120 }
122 100% {
123 bottom: 0;
124 }
125 }
127 .smile {
128 top: calc(20 * var(--unit));
129 }
131 .eyes {
132 top: calc(5 * var(--unit));
133 }
136 position: relative;
137 width: calc(17 * var(--unit));
138 left: calc(-8.5 * var(--unit));
139 top: calc(-3 * var(--unit));
140 animation-fill-mode: both;
141 }
143 .smile>* {
144 animation-name: appear;
145 animation-duration: 0.3s;
146 }
148 @keyframes appear {
149 0% {
150 transform: scaleY(0);
151 }
153 100% {
154 transform: scaleY(1);
155 }
156 }
158 .eyes>* {
160 animation-name: eyes-blink;
161 animation-duration: 4s;
162 animation-iteration-count: infinite;
163 }
165 @keyframes eyes-blink {
167 transform: scaleY(0);
168 }
171 transform: scaleY(1);
172 }
173 }
175 .stem {
176 position: relative;
177 top: calc(15 * var(--unit));
178 background-color: #495;
181 width: var(--unit);
182 height: calc(75 * var(--unit));
185 animation-name: appear;
186 animation-duration: 0.6s;
187 animation-fill-mode: both;
188 }
190 .wesolych, .wszystkich {
191 position: relative;
192 width: 0;
193 height: 0;
194 top: calc(-55 * var(--unit));
196 animation-name: appear;
197 animation-duration: 0.4s;
198 animation-fill-mode: both;
199 }
201 .wszystkich {
202 top: calc(-35 * var(--unit));
203 }
206 position: relative;
207 width: calc(42 * var(--unit));
208 left: calc(-21 * var(--unit));
211 animation-name: bounce;
212 animation-direction: alternate;
213 animation-iteration-count: infinite;
214 animation-duration: 1.5s;
215 animation-fill-mode: both;
217 }
219 @keyframes bounce {
220 0% {
221 transform: scaleY(0.7);
222 }
224 100% {
225 transform: scaleY(1.2);
226 }
227 }
228 </style>
229 </head>
230 <body>
238 </div>
239 </div>
243 </div>
244 </div>
248 </div>
249 </div>
253 </div>
254 </div>
258 </div>
259 </div>
263 </div>
264 </div>
268 </div>
269 </div>
273 </div>
274 </div>
278 </div>
279 </div>
283 </div>
284 </div>
288 </div>
289 </div>
293 </div>
294 </div>
298 </div>
299 </div>
303 </div>
304 </div>
308 </div>
309 </div>
313 </div>
314 </div>
318 </div>
319 </div>
323 </div>
324 </div>
328 </div>
329 </div>
333 </div>
334 </div>
338 </div>
339 </div>
343 </div>
344 </div>
348 </div>
349 </div>
353 </div>
354 </div>
358 </div>
359 </div>
363 </div>
364 </div>
368 </div>
369 </div>
373 </div>
374 </div>
378 </div>
379 </div>
383 </div>
384 </div>
388 </div>
389 </div>
393 </div>
394 </div>
398 </div>
399 </div>
403 </div>
404 </div>
408 </div>
409 </div>
413 </div>
414 </div>
418 </div>
419 </div>
423 </div>
424 </div>
428 </div>
429 </div>
433 </div>
434 </div>
438 </div>
439 </div>
443 </div>
444 </div>
448 </div>
449 </div>
453 </div>
454 </div>
458 </div>
459 </div>
463 </div>
464 </div>
468 </div>
469 </div>
473 </div>
474 </div>
478 </div>
479 </div>
483 </div>
484 </div>
488 </div>
489 </div>
493 </div>
494 </div>
498 </div>
499 </div>
503 </div>
504 </div>
508 </div>
509 </div>
513 </div>
514 </div>
518 </div>
519 </div>
523 </div>
524 </div>
528 </div>
529 </div>
533 </div>
534 </div>
538 </div>
539 </div>
543 </div>
544 </div>
548 </div>
549 </div>
553 </div>
554 </div>
558 </div>
559 </div>
563 </div>
564 </div>
568 </div>
569 </div>
573 </div>
574 </div>
578 </div>
579 </div>
583 </div>
584 </div>
588 </div>
589 </div>
593 </div>
594 </div>
598 </div>
599 </div>
603 </div>
604 </div>
608 </div>
609 </div>
612 </div>
615 </div>
616 </div>
619 </div>
622 </div>
623 </div>
624 </body>
625 </html>