Webleb - UI Elements - CSS Stage with Light Strings and Stairs

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Knewave&display=swap');

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
  --swingDuration: 32s -28s;
}

body {
  font-family: "Knewave", system-ui;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 50em;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.stage {
  position: relative;
  transform: rotateX(90deg) translateZ(-15em);
  animation: stageRotate var(--swingDuration) infinite linear;
  
  * { position: absolute; }
}

@keyframes stageRotate {
  to { rotate: y -360deg; }
}

.floor {
  inset: -100em;
  background:
    radial-gradient(closest-side, transparent, black),
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 7em 4.5em,
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 7.5em 5em,
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 4em 7.5em,
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 4.5em 5em,
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 5em 7.5em,
    radial-gradient(#ff0, transparent 0.1em) 0 0 / 5.5em 4em,
    black;
}

.innerStage {
  inset: -5.75em;
  background-color: #777;
  border-radius: 50%;
  border: 0.25em solid #444;
  transform: translateZ(9em);
}

.innerRing {
  inset: -6em;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.25em white inset,
    0 0 2em white inset;
  transform: translateZ(28em) rotateX(-30deg);
  
  --stringHeight: 36em;
  --w: 6em;
  --h: 6em;
  --rx: -60deg;
  --ro: 6deg;
}

.outerRing {
  inset: -8em -7em;
  border-radius: 50%;
  box-shadow:
    0 0 0 0.25em white inset,
    0 0 2em white inset;
  transform: translateZ(16em) rotateX(-40deg);
  
  --stringHeight: 28em;
  --w: 7em;
  --h: 8em;
  --rx: -50deg;
  --ro: 4deg;
}

.stairsRing {
  inset: -16em -13em;
  transform: translateZ(8em) rotateX(-25deg) rotateZ(180deg);
  
  --stringHeight: 15em;
  --w: 13em;
  --h: 16em;
  --rx: -115deg;
  --ro: 2deg;
  
  &::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow:
      0 0 0 0.25em white inset,
      0 0 1em white inset;
    clip-path: polygon(0 0, 50% 0, 10% 50%, 50% 100%, 0 100%);
  }
}

.backBar {
  inset: -4em -0.1em;
  background-color: #fff;
  transform: translateZ(14.7em) translateY(-10.5em);
  
  --stringHeight: 15em;
  --rx: -90deg; 
  
  .lightstring {
    left: 0; top: calc(var(--i) * 0.5em);
  }

&::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fff;
    rotate: y 90deg;
    border-radius: 1em;
  }
}

.lightstring {
  left: calc(50% - sin(var(--i) * var(--ro)) * var(--w) - 0.25em);
  top: calc(50% - cos(var(--i) * var(--ro)) * var(--h));
  width: 0.5em; height: var(--stringHeight);
  background-image: radial-gradient(circle at 50% 50%, #fff7, transparent 0.1em);
  background-size: 100% 0.25em;
  transform-origin: top;
  animation: lightstringRotate var(--swingDuration) infinite linear;
  
  &.short {
    height: 2em;
  }
  
  &::after {
    content: '';
    position: absolute;
    left: -2em;
    top: calc(abs(sin(var(--i) * 10deg)) * 100% - 2.25em);
    width: 4.5em; height: 4.5em;
    background-image: radial-gradient(closest-side, var(--_c, #dff), 1%, transparent);
    animation: sparkle 4s calc(abs(sin(var(--i) * 20.5deg)) * -4s) infinite step-end;
  }
  
  &:nth-child(odd) {
    --_c: #ffd;
  }
}

@keyframes lightstringRotate {
  from  { transform: rotateX(var(--rx)) rotateY(0deg); }
  to  { transform: rotateX(var(--rx)) rotateY(360deg); }
}

@keyframes sparkle {
  0%, 10%, 100% { opacity: 0; }
  5% { opacity: 1; }
}

.stair {
  inset: -3em -1em;
  background-color: #444;
  transform-style: flat;
  border: 0.125em solid #777;
  transform:
    rotate(calc(var(--i) * -10deg - 50deg))
    translateY(10em)
    translateZ(calc((var(--i) + 1) * 0.75em));
  
  &:last-child {
    inset: -3em -2em;
    transform:
      rotate(calc(var(--i) * -10deg - 55deg))
      translateY(10em)
      translateZ(calc((var(--i) + 1) * 0.75em));
  }
}

.number {
  inset: -2em;
  display: grid;
  place-items: center;
  transform: rotateX(-90deg) translateY(-2.5em);
  font-size: 6em;
  color: hsl(200 100% 50%);
}

JS

CSS Stage with Light Strings and Stairs

Recommended

HTML Light Button with Discord Icon

CSS Animated Loading Screen with Dots

CSS Social Icons Toggler

HTML

CSS

JS

Recommended

HTML Light Button with Discord Icon

CSS Animated Loading Screen with Dots

CSS Social Icons Toggler

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS