Webleb - कोड स्निपेट्स - प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

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

प्रकाश तारों और सीढ़ियों के साथ सीएसएस स्टेज

अनुशंसित

एचटीएमएल सीएसएस कॉन्टैक्ट फॉर्म

शब्द शब्दकोश और उच्चारण

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

HTML

CSS

JS

अनुशंसित

एचटीएमएल सीएसएस कॉन्टैक्ट फॉर्म

शब्द शब्दकोश और उच्चारण

ग्लास प्रभाव और टेलविंड के साथ कॉफ़ीशॉप लॉगिन पृष्ठ

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS