{"html":"

\n","css":".campfire-loader {\n position: relative;\n width: 6em;\n height: 6em;\n margin: 2em auto;\n}\n\n.fire-container {\n position: absolute;\n bottom: 2.5em;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n}\n\n.flame {\n position: absolute;\n background: linear-gradient(180deg, #ff6b00 0%, #ffd700 70%);\n border-radius: 50%;\n animation: flicker 0.8s ease-in-out infinite alternate;\n}\n\n.flame-main {\n width: 1.8em;\n height: 2.5em;\n clip-path: polygon(50% 0, 100% 100%, 0 100%);\n}\n\n.flame-left,\n.flame-right {\n width: 1.2em;\n height: 1.8em;\n top: 0.5em;\n}\n\n.flame-left {\n left: -1.2em;\n clip-path: polygon(70% 0, 100% 100%, 0 100%);\n animation-delay: 0.2s;\n}\n\n.flame-right {\n right: -1.2em;\n clip-path: polygon(30% 0, 100% 100%, 0 100%);\n animation-delay: 0.4s;\n}\n\n.logs {\n position: absolute;\n bottom: 0;\n width: 100%;\n display: flex;\n justify-content: space-between;\n padding: 0 0.8em;\n}\n\n.log {\n width: 1.5em;\n height: 0.5em;\n background: linear-gradient(45deg, #6b4226, #8b4513);\n border-radius: 0.2em;\n transform: rotate(-15deg);\n}\n\n.log:last-child {\n transform: rotate(15deg);\n}\n\n.embers {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n\n.ember {\n position: absolute;\n width: 0.3em;\n height: 0.3em;\n background: #ff4500;\n border-radius: 50%;\n animation: float 1.5s ease-in infinite;\n animation-delay: calc(var(--delay) * 1s);\n bottom: 2.8em;\n left: 50%;\n}\n\n.sparkles {\n position: absolute;\n width: 100%;\n height: 100%;\n background: radial-gradient(\n circle,\n rgba(255, 215, 0, 0.2) 0%,\n transparent 60%\n );\n animation: glow 1.5s ease-in-out infinite;\n}\n\n@keyframes flicker {\n 0% {\n transform: scaleY(1) skew(2deg);\n opacity: 0.9;\n }\n 100% {\n transform: scaleY(1.2) skew(-3deg);\n opacity: 1;\n }\n}\n\n@keyframes float {\n 0% {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n 100% {\n transform: translateY(-3em) translateX(calc(var(--delay) * 1em)) scale(0.2);\n opacity: 0;\n }\n}\n\n@keyframes glow {\n 0%,\n 100% {\n opacity: 0.3;\n }\n 50% {\n opacity: 0.6;\n }\n}\n"}

horrible-owl-70

👁 实时预览

📝 源代码