پیشنمایش زنده
کد 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;
}
}