Big Bang !

2023-02-24 19:26:37 +11:00
commit caca7bf083
9 changed files with 212 additions and 0 deletions
--- a/styles/main.css
+++ b/styles/main.css
@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-image: url('../images/extract_data.jpg');
+  background-size: cover;
+  overflow: hidden;
+}
+
+ul {
+  overflow: hidden;
+  perspective: 900px;
+  list-style: none;
+  height: 100vh;
+  max-height: 800px;
+  min-height: 400px;
+  text-align: center;
+}
+
+@keyframes width-sway {
+  0%, 100% {
+    width: 500px;
+  }
+  50% {
+    width: 100%;
+  }
+}
+li {
+  position: absolute;
+  top: 0;
+  margin: auto;
+  width: 100%;
+  transform: translateY(100vh);
+  font-size: 6rem;
+  font-family: sans-serif;
+  font-weight: bold;
+  color: #ffffdd;
+  animation: 5.3333333333s spiral-staircase linear infinite;
+  white-space: nowrap;
+}
+
+li:nth-child(1) {
+  animation-delay: 0.3333333333s;
+}
+
+li:nth-child(2) {
+  animation-delay: 0.6666666667s;
+}
+
+li:nth-child(3) {
+  animation-delay: 1s;
+}
+
+li:nth-child(4) {
+  animation-delay: 1.3333333333s;
+}
+
+li:nth-child(5) {
+  animation-delay: 1.6666666667s;
+}
+
+li:nth-child(6) {
+  animation-delay: 2s;
+}
+
+li:nth-child(7) {
+  animation-delay: 2.3333333333s;
+}
+
+li:nth-child(8) {
+  animation-delay: 2.6666666667s;
+}
+
+li:nth-child(9) {
+  animation-delay: 3s;
+}
+
+li:nth-child(10) {
+  animation-delay: 3.3333333333s;
+}
+
+li:nth-child(11) {
+  animation-delay: 3.6666666667s;
+}
+
+li:nth-child(12) {
+  animation-delay: 4s;
+}
+
+li:nth-child(13) {
+  animation-delay: 4.3333333333s;
+}
+
+li:nth-child(14) {
+  animation-delay: 4.6666666667s;
+}
+
+li:nth-child(15) {
+  animation-delay: 5s;
+}
+
+li:nth-child(16) {
+  animation-delay: 5.3333333333s;
+}
+
+@keyframes spiral-staircase {
+  0% {
+    transform: rotateY(90deg) translateY(105vh) rotate(0deg) scale(0);
+    opacity: 0;
+  }
+  40% {
+    transform: rotateY(90deg) translateY(61vh) rotate(0deg) scale(0);
+    opacity: 0;
+  }
+  50% {
+    transform: rotateY(0deg) translateY(55vh) rotate(0deg) scale(0.50);
+    opacity: 1;
+  }
+  75% {
+    transform: rotateY(-60deg) translateY(27.5vh) rotate(0deg) scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: rotateY(-90deg) translateY(-5vh) rotate(0deg) scale(1.2);
+    opacity: 0;
+  }
+}