update: bouncy cube

lezette · Oct 4, 2024 · e081abe · e081abe
1 parent 2f97169
commit e081abe
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 8 deletions.
diff --git a/bouncyCube/index.html b/bouncyCube/index.html
@@ -12,7 +12,16 @@
 
   <div class="stage">
     <div class="floor"></div>
-    <div class="cube"></div>
+    <div class="cube">
+      <div class="front"></div>
+      <div class="back"></div>
+      <div class="left"></div>
+      <div class="right"></div>
+      <div class="top">
+        <div class="ballShadow"></div>
+      </div>
+      <div class="bottom"></div>
+    </div>
     <div class="ball"></div>
   </div>
 </body>

diff --git a/bouncyCube/style.css b/bouncyCube/style.css
@@ -1,10 +1,13 @@
 :root {
   --boxColor: #0ff7;
+  --rotateSpeed: 30s;
+  --bounceSpeed: 1.5s;
 }
 
 body {
   background-color: black;
   min-height: 100vh;
+  overflow: hidden;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -17,8 +20,18 @@ body {
 .stage {
   position: relative;
   transform-style: preserve-3d;
+  animation: sceneRotate var(--rotateSpeed) infinite linear;
+
+
+}
+
+@keyframes sceneRotate {
+  to {
+    transform: rotateY(360deg);
+  }
 }
 
+
 .ball {
   width: 1em;
   height: 1em;
@@ -27,15 +40,121 @@ body {
   position: absolute;
   left: -.5em;
   bottom: 1em;
+  background-image: radial-gradient(circle at top,
+      white,
+      #000);
+  animation:
+    ballBounce var(--bounceSpeed) infinite ease-out,
+    sceneRotate var(--rotateSpeed) infinite linear reverse;
+}
+
+@keyframes ballBounce {
+
+  0%,
+  100% {
+    bottom: 0.5em;
+  }
+
+  50% {
+    bottom: 3em;
+    animation-timing-function: ease-in;
+  }
+}
+
+.ballShadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: radial-gradient(#0007, #0000 50%);
+  animation: ballShadow var(--bounceSpeed) infinite ease-out;
+}
+
+@keyframes ballShadow {
+
+  0%,
+  8%,
+  93.5%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  50% {
+    transform: scale(2);
+    opacity: 0.5;
+    animation-timing-function: ease-in;
+  }
 }
 
 .cube {
   width: 2em;
   height: 2em;
-  background-color: var(--boxColor);
   position: absolute;
-  top: -1em;
+  bottom: -1em;
   left: -1em;
+  transform-style: preserve-3d;
+  animation: cubeHeight var(--bounceSpeed) infinite ease-out;
+
+  .front,
+  .back,
+  .left,
+  .right,
+  .top,
+  .bottom {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: var(--boxColor);
+    box-shadow: 0 0 0.5em #000a inset;
+  }
+
+  .front {
+    transform: translateZ(1em);
+  }
+
+  .right {
+    transform: rotateY(90deg) translateZ(1em);
+
+  }
+
+  .back {
+    transform: rotateY(180deg) translateZ(1em);
+
+  }
+
+  .left {
+    transform: rotateY(270deg) translateZ(1em);
+
+  }
+
+  .top {
+    width: 2em;
+    height: 2em;
+    transform: translateY(-50%) rotateX(90deg);
+  }
+
+  .bottom {
+    width: 2em;
+    height: 2em;
+    bottom: 0;
+    transform: translateY(50%) rotateX(90deg);
+    background-color: #0007;
+    box-shadow: 0 0 0.5em #000;
+  }
+}
+
+
+@keyframes cubeHeight {
+
+  0%,
+  100% {
+    height: 1.5em;
+  }
+
+  8%,
+  93.5% {
+    height: 2em;
+  }
 }
 
 .floor {
@@ -44,6 +163,10 @@ body {
   width: 15em;
   height: 15em;
   transform: translate(-50%, -50%) rotateX(90deg);
-  background-image: repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
-  background-size: 1em 1em;
+  background-image:
+    radial-gradient(#0000, #000 75%),
+    repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg);
+  background-size:
+    100%,
+    1em 1em;
 }
diff --git a/cube/style.css b/cube/style.css
@@ -30,9 +30,9 @@ body {
     .side {
       width: 200px;
       height: 200px;
-      border: 1.5px solid white;
-
-      border-radius: 5px;
+      /* border: 1.5px solid white; */
+      box-shadow: 0 0 0.5em #000a inset;
+      /* border-radius: 5px; */
       position: absolute;
       transition: transform 2s ease-in-out;