{"html":"

\n\n","css":".lamp {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 30em;\n min-height: 300px;\n width: 13em;\n min-width: calc(300px * 3 / 7);\n background: #2b4353;\n clip-path: polygon(33% 0, 0 70%, 22% 88%, 0 100%, 100% 100%, 78% 88%, 100% 70%, 67% 0);\n}\n\n.glass {\n background: #b6e1e0;\n width: 100%;\n height: 60%;\n position: absolute;\n bottom: 30%;\n overflow: hidden;\n}\n\n.lava {\n filter: url(\"#goo\");\n position: absolute;\n height: 100%;\n width: 100%;\n top: 0;\n left: 0;\n}\n\n.blob {\n border-radius: 50%;\n background: #e8630a;\n position: absolute;\n}\n\n.blob.top {\n width: 100%;\n height: 4%;\n top: -3.7%;\n left: 0;\n}\n\n.blob.bottom {\n width: 100%;\n height: 4%;\n bottom: -3%;\n left: 0;\n}\n\n.blob:nth-child(1) {\n width: calc(15% * 1.4);\n height: 15%;\n left: 45%;\n bottom: -15%;\n animation: blob-one_2 ease-in-out 7s infinite;\n}\n\n.blob:nth-child(2) {\n width: calc(22% * 1.4);\n height: 22%;\n right: 14%;\n bottom: -15%;\n animation: blob-two_2 ease-in-out 11s infinite;\n}\n\n.blob:nth-child(3) {\n width: calc(32% * 1.4);\n height: 32%;\n bottom: -15%;\n left: 14%;\n animation: blob-three_2 ease-in-out 16s infinite;\n}\n\n@keyframes blob-one_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-700%);\n }\n}\n\n@keyframes blob-two_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-420%);\n }\n}\n\n@keyframes blob-three_2 {\n 0%, 100% {\n transform: translatey(0);\n }\n\n 50% {\n transform: translatey(-305%);\n }\n}"}

tender-bulldog-74

👁 实时预览

📝 源代码