پیش‌نمایش زنده
کد HTML
<div class="container">
  <div class="lamp">
    <div class="hat-thingy"></div>
    <div class="glass">
      <div class="glass-inside">
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob"></div>
        <div class="boop blob-top"></div>
        <div class="boop blob-bottom"></div>
      </div>
    </div>
    <div class="base-one"></div>
    <div class="base-butt"></div>
    <div class="shadow"></div>
    <div class="the-actual-shadow"></div>
  </div>
</div>
کد CSS
.lamp .base-butt,
.lamp .base-one,
.lamp .hat-thingy {
  background-color: #692c82;
  background-image: linear-gradient(90deg, transparent 66%, #4a1f5c 66%);
}

.container {
  position: relative;
  padding: 8em;
  height: 100%;
  min-height: 20.75em;
}

.lamp {
  position: absolute;
  height: 18.75em;
  width: 20em;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.lamp > * {
  overflow: hidden;
  position: absolute;
  margin: auto;
  right: 0;
  left: 0;
}
.lamp > * > * {
  margin: 0 auto;
}
.lamp .hat-thingy {
  transform: perspective(0.25em) rotateX(1.625deg);
  width: 3em;
  height: 2.625em;
  border: 0.25em solid #4a1f5c;
  border-top: 0.375em solid #4a1f5c;
  border-radius: 1em 1em 0 0;
}
.lamp .glass {
  transform: perspective(1em) rotateX(5deg) scale(0.5);
  height: 16.00625em;
  overflow: hidden;
  border-left: 0.625em solid #4a1f5c;
  border-right: 0.625em solid #4a1f5c;
  width: 9.375em;
  top: -2.25em;
  background-color: #ef2d73;
  background-image: linear-gradient(
    90.25deg,
    transparent 65%,
    rgba(105, 44, 130, 0.5) 66%
  );
}
.lamp .glass .glass-inside {
  background-color: rgba(87, 87, 87, 0.4);
  overflow: hidden;
  filter: contrast(24);
  height: 16em;
  opacity: 0.75;
}
.lamp .glass .glass-inside .boop {
  filter: blur(8px);
  border-radius: 50%;
  background-color: #ffbc42;
  position: absolute;
}
.lamp .glass .glass-inside .boop.blob {
  width: 2em;
  height: 2em;
}
.lamp .glass .glass-inside .boop.blob:first-child {
  height: 1em;
  width: 0.75em;
  bottom: -3em;
  left: 15%;
  animation: baba-to-taas-one 9s linear 0.75s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(2) {
  height: 0.125em;
  width: 0.25em;
  bottom: -5em;
  left: 45%;
  animation: baba-to-taas-two 9s linear 1.5s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(3) {
  height: 0.125em;
  width: 0.125em;
  bottom: -5em;
  left: 40%;
  animation: baba-to-taas-three 9s linear 4s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(4) {
  height: 0.25em;
  width: 0.25em;
  bottom: -5em;
  left: 60%;
  animation: baba-to-taas-four 9s linear 5.5s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(5) {
  height: 3em;
  width: 3em;
  top: -3em;
  left: 45%;
  animation: taas-to-baba-one 9s linear 0s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(6) {
  height: 6em;
  width: 4em;
  top: -8em;
  left: 40%;
  animation: taas-to-baba-two 9s linear 3s infinite;
}
.lamp .glass .glass-inside .boop.blob:nth-child(7) {
  height: 3em;
  width: 4em;
  bottom: -3em;
  left: 50%;
  animation: blob-deform-bottom 9s linear 2.5s infinite;
}
.lamp .glass .glass-inside .boop.blob-top {
  width: 100%;
  height: 5em;
  top: -2em;
}
.lamp .glass .glass-inside .boop.blob-bottom {
  width: 100%;
  height: 3em;
  bottom: -2em;
}
.lamp .base-one {
  transform: perspective(1em) rotateX(-5deg);
  bottom: 3.125em;
  border: 0.375em solid #4a1f5c;
  border-top: 0.1875em solid #4a1f5c;
  border-bottom: 0.375em solid #4a1f5c;
  border-radius: 0 0 0.75em 0.75em;
  height: 3.5em;
  width: 6.125em;
  margin: 0 auto;
}
.lamp .base-butt {
  transform: perspective(1em) rotateX(5deg);
  bottom: 1.625em;
  height: 2em;
  width: 5.5em;
  margin: 0 auto;
  border-radius: 0.125em 0.125em 20% 20%;
  border: 0.375em solid #4a1f5c;
  border-top: 0.25em solid #4a1f5c;
  border-bottom: 0.3125em solid #4a1f5c;
  z-index: -99;
}
.lamp .shadow {
  height: 1.5em;
  width: 15em;
  border-radius: 50%;
  margin: auto;
  bottom: 1em;
  z-index: -999;
  right: 0;
  left: 0;
  position: absolute;
  background: #a90d46;
  background: radial-gradient(
    ellipse at center,
    #a90d46 30%,
    rgba(255, 188, 66, 0.7) 40%,
    rgba(255, 188, 66, 0.1) 70%,
    #a90d46 100%
  );
  animation: shadglow 5s linear 0s infinite;
}
.lamp .the-actual-shadow {
  width: 12em;
  bottom: 1.375em;
  border-radius: 50%;
  z-index: -999;
  left: auto;
  height: 1em;
  background: rgba(74, 31, 92, 0.25);
  mix-blend-mode: darken;
}

@keyframes baba-to-taas-one {
  0% {
    height: 0.5em;
    width: 0.25em;
    bottom: -4em;
  }
  100% {
    height: 9em;
    width: 8em;
    bottom: 18em;
  }
}
@keyframes baba-to-taas-two {
  0% {
    height: 0.125em;
    width: 0.25em;
    bottom: -4em;
  }
  100% {
    height: 4em;
    width: 3em;
    bottom: 18em;
  }
}
@keyframes baba-to-taas-three {
  0% {
    height: 0.125em;
    width: 0.125em;
    bottom: -8em;
  }
  100% {
    height: 7em;
    width: 5em;
    bottom: 18em;
  }
}
@keyframes baba-to-taas-four {
  0% {
    height: 0.25em;
    width: 0.25em;
    bottom: -8em;
    left: 30%;
  }
  100% {
    height: 4em;
    width: 3em;
    bottom: 18em;
    left: 50%;
  }
}
@keyframes taas-to-baba-one {
  0% {
    height: 3em;
    width: 3em;
    top: -4em;
  }
  100% {
    height: 0.25em;
    width: 0.25em;
    top: 18em;
  }
}
@keyframes taas-to-baba-two {
  0% {
    height: 6em;
    width: 4em;
    top: -8em;
  }
  100% {
    height: 2em;
    width: 1.75em;
    top: 18em;
  }
}
@keyframes blob-deform-bottom {
  0% {
    bottom: -3em;
    left: 50%;
  }
  50% {
    bottom: -1.5em;
    left: 20%;
  }
  100% {
    bottom: -3em;
    left: 50%;
  }
}
@keyframes shadglow {
  0% {
    opacity: 1;
    box-shadow: inset 0 0 0 0 #a90d46;
  }
  50% {
    opacity: 0.75;
    box-shadow: inset 0 0 0.5em 0.25em #a90d46;
  }
  100% {
    opacity: 1;
    box-shadow: inset 0 0 0 0 #a90d46;
  }
}
نوع: loader
تاریخ ایجاد: 2026/06/06
آخرین بروزرسانی: 2026/06/06