chryzantem.html.template

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>❁</title>
   5     <style>
   6       div, body {
   7           margin: 0;
   8           padding: 0;
   9       }
  10
  11       img {
  12           user-select: none;
  13       }
  14
  15       html {
  16           width: 100vw;
  17           height: 100vh;
  18           overflow: hidden;
  19       }
  20
  21       #picture {
  22           --unit: calc(100vh / 90);
  23           overflow: hidden;
  24           height: calc(90 * var(--unit));
  25       }
  26
  27       #picture h1 {
  28           font-size: var(--unit);
  29       }
  30
  31       #picture>*, .smile, .eyes, .center {
  32           margin-left: auto;
  33           margin-right: auto;
  34       }
  35
  36       .flower {
  37           position: relative;
  38           top: calc(-75 * var(--unit));
  39           width: calc(30 * var(--unit));
  40           height: calc(30 * var(--unit));
  41       }
  42
  43       .flower>* {
  44           position: relative;
  45           width: 0;
  46           height: 0;
  47       }
  48
  49       .center {
  50           top: calc(15 * var(--unit));
  51
  52           animation-name: center-appear;
  53           animation-duration: 0.4s;
  54           animation-fill-mode: both;
  55       }
  56
  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       }
  68
  69       @keyframes center-appear {
  70           0% {
  71               transform: scale(0);
  72           }
  73
  74           100% {
  75               transform: scale(1);
  76           }
  77       }
  78
  79       .petal {
  80           top: calc(14.7 * var(--unit));
  81           left: calc(15 * var(--unit));
  82       }
  83
  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       }
  90
  91       .petal>*{
  92           position: relative;
  93           top: calc(-3 * var(--subunit) * var(--unit));
  94           left: calc(-0.5 * var(--subunit) * var(--unit));
  95
  96           transform-origin: 50% 100%;
  97           animation-name: petal-rotate;
  98       }
  99
 100       .petal>*>*{
 101           position: relative;
 102
 103           animation-delay: inherit;
 104           animation-name: petal-come-close;
 105       }
 106
 107       @keyframes petal-rotate {
 108           0% {
 109               transform: rotate(0deg);
 110           }
 111
 112           100% {
 113               transform: rotate(var(--end-deg));
 114           }
 115       }
 116
 117       @keyframes petal-come-close {
 118           0% {
 119               bottom: calc(15 * var(--unit));
 120           }
 121
 122           100% {
 123               bottom: 0;
 124           }
 125       }
 126
 127       .smile {
 128           top: calc(20 * var(--unit));
 129       }
 130
 131       .eyes {
 132           top: calc(5 * var(--unit));
 133       }
 134
 135       .smile>*, .eyes>* {
 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       }
 142
 143       .smile>* {
 144           animation-name: appear;
 145           animation-duration: 0.3s;
 146       }
 147
 148       @keyframes appear {
 149           0% {
 150               transform: scaleY(0);
 151           }
 152
 153           100% {
 154               transform: scaleY(1);
 155           }
 156       }
 157
 158       .eyes>* {
 159           transform-origin: 50% calc(10.5 * var(--unit));
 160           animation-name: eyes-blink;
 161           animation-duration: 4s;
 162           animation-iteration-count: infinite;
 163       }
 164
 165       @keyframes eyes-blink {
 166           0%, 100% {
 167               transform: scaleY(0);
 168           }
 169
 170           7.5%, 92.5% {
 171               transform: scaleY(1);
 172           }
 173       }
 174
 175       .stem {
 176           position: relative;
 177           top: calc(15 * var(--unit));
 178           background-color: #495;
 179           border-left: solid calc(0.5 * var(--unit)) #252;
 180           border-right: solid calc(0.5 * var(--unit)) #252;
 181           width: var(--unit);
 182           height: calc(75 * var(--unit));
 183
 184           transform-origin: 50% calc(0 * var(--unit));
 185           animation-name: appear;
 186           animation-duration: 0.6s;
 187           animation-fill-mode: both;
 188       }
 189
 190       .wesolych, .wszystkich {
 191           position: relative;
 192           width: 0;
 193           height: 0;
 194           top: calc(-55 * var(--unit));
 195
 196           animation-name: appear;
 197           animation-duration: 0.4s;
 198           animation-fill-mode: both;
 199       }
 200
 201       .wszystkich {
 202           top: calc(-35 * var(--unit));
 203       }
 204
 205       .wesolych>*, .wszystkich>* {
 206           position: relative;
 207           width: calc(42 * var(--unit));
 208           left: calc(-21 * var(--unit));
 209
 210           transform-origin: 50% 100%;
 211           animation-name: bounce;
 212           animation-direction: alternate;
 213           animation-iteration-count: infinite;
 214           animation-duration: 1.5s;
 215           animation-fill-mode: both;
 216           animation-timing-function: cubic-bezier(0.01, 0.29, 0, 0.96);
 217       }
 218
 219       @keyframes bounce {
 220           0% {
 221               transform: scaleY(0.7);
 222           }
 223
 224           100% {
 225               transform: scaleY(1.2);
 226           }
 227       }
 228     </style>
 229   </head>
 230   <body>
 231     <div id="picture">
 232 <IMPORT stem.html/>
 233       <div class="flower">
 234 <IMPORT center.html/>
 235 <IMPORT petals.html/>
 236 <IMPORT face.html/>
 237       </div>
 238 <IMPORT text.html/>
 239     </div>
 240   </body>
 241 </html>