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

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

अनुशंसित

एस्केप रोड गेम का HTML5 एम्बेड कोड

पोर्टफोलियो वेबसाइट HTML सीएसएस टेम्पलेट

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

HTML

CSS

JS

अनुशंसित

एस्केप रोड गेम का HTML5 एम्बेड कोड

पोर्टफोलियो वेबसाइट HTML सीएसएस टेम्पलेट

3डी होवर प्रभाव के साथ एनिमेटेड कार्ड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS