diff options
Diffstat (limited to 'kwiatuszek.html.template')
| -rw-r--r-- | kwiatuszek.html.template | 249 |
1 files changed, 249 insertions, 0 deletions
diff --git a/kwiatuszek.html.template b/kwiatuszek.html.template new file mode 100644 index 0000000..6bbaa8f --- /dev/null +++ b/kwiatuszek.html.template @@ -0,0 +1,249 @@ +<!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"> +<IMPORT stem.html/> + <div class="flower animated"> +<IMPORT center.html/> +<IMPORT petals.html/> +<IMPORT face.html/> + </div> +<IMPORT text.html/> + </div> + </body> +</html> |