diff options
Diffstat (limited to 'kwiatuszek.html')
| -rw-r--r-- | kwiatuszek.html | 558 |
1 files changed, 558 insertions, 0 deletions
diff --git a/kwiatuszek.html b/kwiatuszek.html new file mode 100644 index 0000000..695d927 --- /dev/null +++ b/kwiatuszek.html @@ -0,0 +1,558 @@ +<!DOCTYPE html> +<html> + <head> + <title>🏶</title> + <style> + div, body { + margin: 0; + padding: 0; + } + + img { + user-select: none; + } + + html { + width: 100vw; + height: 100vh; + overflow: hidden; + bachground-color: #fff; + } + + #picture { + --unit: calc(100vh / 90); + overflow: hidden; + height: calc(90 * var(--unit)); + } + + #picture h1 { + font-size: var(--unit); + } + + #picture>*, .smile, .eyes, .center { + margin-left: auto; + margin-right: auto; + } + + .flower { + position: relative; + top: calc(-67 * var(--unit)); + width: calc(30 * var(--unit)); + height: calc(30 * var(--unit)); + } + + .flower>* { + position: relative; + width: 0; + height: 0; + } + + .center { + top: calc(15 * var(--unit)); + + transform-origin: 50% 50%; + animation-name: center-appear; + animation-duration: 0; + animation-fill-mode: both; + } + + .animated .center { + animation-duration: 0.4s; + } + + .center::before { + content: ""; + display: block; + width: calc(3 * var(--unit)); + height: calc(3 * var(--unit)); + background-color: #c80; + border-radius: calc(1.5 * var(--unit)); + position: relative; + top: calc(-1.5 * var(--unit)); + left: calc(-1.5 * var(--unit)); + } + + @keyframes center-appear { + 0% { + transform: scale(0); + } + + 100% { + transform: scale(1); + } + } + + .petal { + top: calc(14.7 * var(--unit)); + left: calc(15 * var(--unit)); + } + + .petal * { + width: calc(var(--subunit) * var(--unit)); + animation-duration: 8s; + animation-timing-function: ease-out; + animation-fill-mode: both; + } + + .petal>*{ + position: relative; + top: calc(-3 * var(--subunit) * var(--unit)); + left: calc(-0.5 * var(--subunit) * var(--unit)); + + transform-origin: 50% 100%; + animation-name: petal-rotate; + } + + .petal>*>*{ + position: relative; + + animation-delay: inherit; + animation-name: petal-come-close; + } + + @keyframes petal-rotate { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(var(--end-deg)); + } + } + + @keyframes petal-come-close { + 0% { + bottom: calc(15 * var(--unit)); + opacity: 0; + } + + 100% { + bottom: 0; + opacity: 1; + } + } + + .smile { + top: calc(20 * var(--unit)); + } + + .eyes { + top: calc(5 * var(--unit)); + } + + .smile>*, .eyes>* { + position: relative; + width: calc(17 * var(--unit)); + left: calc(-8.5 * var(--unit)); + top: calc(-3 * var(--unit)); + animation-fill-mode: both; + } + + .smile>* { + animation-name: appear; + animation-duration: 0.3s; + } + + @keyframes appear { + 0% { + transform: scaleY(0); + } + + 100% { + transform: scaleY(1); + } + } + + .eyes>* { + transform-origin: 50% calc(10.5 * var(--unit)); + animation-name: eyes-blink; + animation-duration: 4s; + animation-iteration-count: infinite; + } + + @keyframes eyes-blink { + 0%, 100% { + transform: scaleY(0); + } + + 7.5%, 92.5% { + transform: scaleY(1); + } + } + + .stem { + position: relative; + top: calc(15 * var(--unit)); + background-color: #495; + border-left: solid calc(0.5 * var(--unit)) #252; + border-right: solid calc(0.5 * var(--unit)) #252; + width: var(--unit); + height: calc(75 * var(--unit)); + + transform-origin: 50% calc(0 * var(--unit)); + animation-name: appear; + animation-duration: 0.6s; + animation-fill-mode: both; + } + + .najlepszego, .zokazji { + position: relative; + width: 0; + height: 0; + top: calc(-55 * var(--unit)); + + animation-name: appear; + animation-duration: 0.4s; + animation-fill-mode: both; + } + + .zokazji { + top: calc(-35 * var(--unit)); + } + + .najlepszego>*, .zokazji>* { + position: relative; + width: calc(42 * var(--unit)); + left: calc(-21 * var(--unit)); + + transform-origin: 50% 100%; + animation-name: bounce; + animation-direction: alternate; + animation-iteration-count: infinite; + animation-duration: 1.5s; + animation-fill-mode: both; + animation-timing-function: cubic-bezier(0.01, 0.29, 0, 0.96); + } + + @keyframes bounce { + 0% { + transform: scaleY(0.7); + } + + 100% { + transform: scaleY(1.2); + } + } + </style> + </head> + <body> + <div id="picture"> + <div class="stem" style="animation-delay: 28.05s;"></div> + <div class="flower animated"> + <div class="center" style="animation-delay: 18.8s;"></div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -360deg; animation-delay: 20.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -384deg; animation-delay: 19.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -408deg; animation-delay: 19.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -432deg; animation-delay: 19.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -456deg; animation-delay: 18.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -480deg; animation-delay: 18.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -504deg; animation-delay: 18.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -528deg; animation-delay: 17.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -552deg; animation-delay: 17.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -576deg; animation-delay: 17.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -600deg; animation-delay: 17.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -624deg; animation-delay: 16.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -648deg; animation-delay: 16.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -672deg; animation-delay: 16.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 5.3; --end-deg: -696deg; animation-delay: 15.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -732deg; animation-delay: 15.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -756deg; animation-delay: 15.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -780deg; animation-delay: 14.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -804deg; animation-delay: 14.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -828deg; animation-delay: 14.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -852deg; animation-delay: 14.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -876deg; animation-delay: 13.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -900deg; animation-delay: 13.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -924deg; animation-delay: 13.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -948deg; animation-delay: 12.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -972deg; animation-delay: 12.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -996deg; animation-delay: 12.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -1020deg; animation-delay: 11.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -1044deg; animation-delay: 11.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 3.2; --end-deg: -1068deg; animation-delay: 11.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1104deg; animation-delay: 11.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1128deg; animation-delay: 10.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1152deg; animation-delay: 10.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1176deg; animation-delay: 10.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1200deg; animation-delay: 9.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1224deg; animation-delay: 9.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1248deg; animation-delay: 9.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1272deg; animation-delay: 8.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1296deg; animation-delay: 8.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1320deg; animation-delay: 8.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1344deg; animation-delay: 8.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1368deg; animation-delay: 7.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1392deg; animation-delay: 7.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1416deg; animation-delay: 7.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1.5; --end-deg: -1440deg; animation-delay: 6.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1476deg; animation-delay: 6.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1500deg; animation-delay: 6.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1524deg; animation-delay: 5.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1548deg; animation-delay: 5.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1572deg; animation-delay: 5.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1596deg; animation-delay: 5.0s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1620deg; animation-delay: 4.7s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1644deg; animation-delay: 4.4s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1668deg; animation-delay: 4.1s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1692deg; animation-delay: 3.8s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1716deg; animation-delay: 3.5s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1740deg; animation-delay: 3.2s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1764deg; animation-delay: 2.9s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1788deg; animation-delay: 2.6s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="petal"> + <div style="--subunit: 1; --end-deg: -1812deg; animation-delay: 2.3s;"> + <img src="./petal.svg" alt="flower petal" draggable="false"> + </div> + </div> + <div class="smile"> + <img style="animation-delay: 27.55s;" src="./smile.svg" alt="flower smile" draggable="false"> + </div> + <div class="eyes"> + <img style="animation-delay: 27.55s;" src="./eyes.svg" alt="flower eyes" draggable="false"> + </div> + </div> + <div class="najlepszego" style="animation-delay: 29.15s;"> + <img src="najlepszego.svg" alt=""Wszystkiego najlepszego" text" draggabe="false"></img> + </div> + <div class="zokazji" style="animation-delay: 29.15s;"> + <img src="zokazji.svg" alt=""Z okazji urodzin" text" draggable="false"></img> + </div> + </div> + </body> +</html> |