initial commit

author: Wojtek Kosior <koszko@koszko.org> 2021-11-21 10:49:09 +0100
committer: Wojtek Kosior <koszko@koszko.org> 2021-11-21 10:49:09 +0100
commit: 29a86d3d4ec8ee2241edb7384fe8613ff6382ac9 (patch)
tree: 1804623a73c21b4796439bef52b45025fca2eb01 /kwiatuszek.html
download: birthday-flower-css-animation-29a86d3d4ec8ee2241edb7384fe8613ff6382ac9.tar.gz
birthday-flower-css-animation-29a86d3d4ec8ee2241edb7384fe8613ff6382ac9.zip
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>&#x1F3F6;</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="&quot;Wszystkiego najlepszego&quot; text" draggabe="false"></img>
+      </div>
+      <div class="zokazji" style="animation-delay: 29.15s;">
+        <img src="zokazji.svg" alt="&quot;Z okazji urodzin&quot; text" draggable="false"></img>
+      </div>
+    </div>
+  </body>
+</html>
author	Wojtek Kosior <koszko@koszko.org>	2021-11-21 10:49:09 +0100
committer	Wojtek Kosior <koszko@koszko.org>	2021-11-21 10:49:09 +0100
commit	29a86d3d4ec8ee2241edb7384fe8613ff6382ac9 (patch)
tree	1804623a73c21b4796439bef52b45025fca2eb01 /kwiatuszek.html
download	birthday-flower-css-animation-29a86d3d4ec8ee2241edb7384fe8613ff6382ac9.tar.gz birthday-flower-css-animation-29a86d3d4ec8ee2241edb7384fe8613ff6382ac9.zip