{"html":"

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

bad-dragonfly-20

👁 实时预览

📝 源代码