summaryrefslogtreecommitdiff
path: root/chryzantem.html.template
diff options
context:
space:
mode:
authorWojtek <stalking@disallow.ed>2021-10-31 23:55:32 +0100
committerWojtek <stalking@disallow.ed>2021-10-31 23:55:32 +0100
commit69574783196ba1af7f7c428ae8132d7379277c20 (patch)
tree2a2f9a1bb13f07edb120eb87f716e0b626f0a229 /chryzantem.html.template
downloadchrysantemum-69574783196ba1af7f7c428ae8132d7379277c20.tar.gz
chrysantemum-69574783196ba1af7f7c428ae8132d7379277c20.zip
initial commitHEADmaster
Diffstat (limited to 'chryzantem.html.template')
-rw-r--r--chryzantem.html.template241
1 files changed, 241 insertions, 0 deletions
diff --git a/chryzantem.html.template b/chryzantem.html.template
new file mode 100644
index 0000000..853f902
--- /dev/null
+++ b/chryzantem.html.template
@@ -0,0 +1,241 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>❁</title>
+ <style>
+ div, body {
+ margin: 0;
+ padding: 0;
+ }
+
+ img {
+ user-select: none;
+ }
+
+ html {
+ width: 100vw;
+ height: 100vh;
+ overflow: hidden;
+ }
+
+ #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(-75 * 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));
+
+ animation-name: center-appear;
+ animation-duration: 0.4s;
+ animation-fill-mode: both;
+ }
+
+ .center::before {
+ content: "";
+ display: block;
+ width: calc(3 * var(--unit));
+ height: calc(3 * var(--unit));
+ background-color: orange;
+ 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: 10s;
+ 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));
+ }
+
+ 100% {
+ bottom: 0;
+ }
+ }
+
+ .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;
+ }
+
+ .wesolych, .wszystkich {
+ position: relative;
+ width: 0;
+ height: 0;
+ top: calc(-55 * var(--unit));
+
+ animation-name: appear;
+ animation-duration: 0.4s;
+ animation-fill-mode: both;
+ }
+
+ .wszystkich {
+ top: calc(-35 * var(--unit));
+ }
+
+ .wesolych>*, .wszystkich>* {
+ 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">
+<IMPORT center.html/>
+<IMPORT petals.html/>
+<IMPORT face.html/>
+ </div>
+<IMPORT text.html/>
+ </div>
+ </body>
+</html>