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

Company Card List with Branding and Marketing

CSS only infinate marquee

HTML CSS Modern Navbar

HTML

CSS

JS

Recommended

Company Card List with Branding and Marketing

CSS only infinate marquee

HTML CSS Modern Navbar

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS