Webleb - Snippets de Código - Palco CSS com cordões de luz e escadas

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

Palco CSS com cordões de luz e escadas

Recomendado

Gradiente do cursor do mouse

Fonte dançante

Um código por JEBJEB

HTML

CSS

JS

Recomendado

Gradiente do cursor do mouse

Fonte dançante

Um código por JEBJEB

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS