{"html":"

\n\n

\n \n

\n","css":".container {\n display: flex;\n height: 370px;\n width: 370px;\n justify-content: center;\n align-items: center;\n position: relative;\n flex-direction: column;\n}\n\n.moon {\n background-color: #39beff;\n height: 170px;\n width: 170px;\n border-radius: 50%;\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n overflow: hidden;\n}\n\n.crater {\n background-color: #31b4ff;\n height: 30px;\n width: 30px;\n border-radius: 50%;\n position: relative;\n}\n.crater:before {\n content: \"\";\n position: absolute;\n height: 25px;\n width: 25px;\n border-radius: 50%;\n box-shadow: -5px 0 0 2px #1ca4f9;\n top: 2px;\n left: 7px;\n}\n.crater1 {\n top: 27px;\n left: 90px;\n transform: scale(0.9);\n}\n.crater2 {\n bottom: 15px;\n left: 61px;\n transform: scale(0.6);\n}\n.crater3 {\n left: 15px;\n transform: scale(0.75);\n}\n.crater4 {\n left: 107px;\n top: 32px;\n transform: scale(1.18);\n}\n.crater5 {\n left: 33px;\n bottom: 4px;\n transform: scale(0.65);\n}\n\n.shadow {\n height: 190px;\n width: 190px;\n box-shadow: 21px 0 0 5px rgba(0, 0, 0, 0.15);\n border-radius: 50%;\n position: relative;\n bottom: 157.5px;\n right: 46px;\n}\n\n.eye {\n background-color: #161616;\n height: 12px;\n width: 12px;\n position: relative;\n border-radius: 50%;\n}\n.eye-l {\n bottom: 255px;\n left: 59px;\n}\n.eye-r {\n bottom: 267px;\n left: 101px;\n}\n\n.mouth {\n height: 5px;\n width: 10px;\n border: 3px solid #161616;\n position: relative;\n bottom: 262px;\n left: 79px;\n border-top: none;\n border-radius: 0 0 10px 10px;\n}\n\n.blush {\n background-color: #1ca4f9;\n height: 7.5px;\n width: 7.5px;\n position: relative;\n border-radius: 50%;\n}\n.blush1 {\n bottom: 273px;\n left: 50px;\n}\n.blush2 {\n bottom: 281px;\n left: 115px;\n}\n\n.orbit {\n height: 280px;\n width: 280px;\n border-radius: 50%;\n position: absolute;\n margin: auto;\n left: 0;\n right: 0;\n top: 0;\n bottom: 0;\n animation: spin 10s infinite linear;\n}\n@keyframes spin {\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.rocket {\n background-color: #fafcf7;\n height: 50px;\n width: 25px;\n border-radius: 50% 50% 0 0;\n position: relative;\n left: -11px;\n top: 112px;\n overflow: visible;\n}\n\n.rocket:before {\n content: \"\";\n position: absolute;\n background-color: #39beff;\n height: 20px;\n width: 55px;\n border-radius: 50% 50% 0 0;\n z-index: -1;\n right: -15px;\n bottom: 0;\n}\n\n.rocket:after {\n content: \"\";\n position: absolute;\n background-color: #39beff;\n height: 4px;\n width: 15px;\n border-radius: 0 0 2px 2px;\n bottom: -4px;\n left: 4.3px;\n}\n\n.rocket .fire {\n position: absolute;\n bottom: -20px;\n left: 50%;\n transform: translateX(-50%);\n width: 12px;\n height: 30px;\n background: radial-gradient(\n ellipse at center,\n #ffec85 0%,\n #ffae34 40%,\n #ec760c 70%,\n #cd4606 90%,\n rgba(0, 0, 0, 0) 100%\n );\n border-radius: 50%;\n animation: flame 0.3s infinite alternate;\n z-index: -1;\n}\n\n@keyframes flame {\n 0% {\n transform: translateX(-50%) scaleY(1);\n opacity: 0.9;\n }\n 100% {\n transform: translateX(-50%) scaleY(1.4);\n opacity: 0.5;\n }\n}\n\n.rocket .gas {\n position: absolute;\n bottom: -35px;\n left: 50%;\n transform: translateX(-50%);\n width: 10px;\n height: 10px;\n background: rgba(200, 200, 200, 0.6);\n border-radius: 50%;\n animation: gas 1.5s infinite ease-out;\n}\n.rocket .gas:nth-child(3) {\n animation-delay: 0.3s;\n left: 40%;\n}\n.rocket .gas:nth-child(4) {\n animation-delay: 0.6s;\n left: 60%;\n}\n\n@keyframes gas {\n 0% {\n transform: translateX(-50%) scale(0.5);\n opacity: 0.8;\n }\n 100% {\n transform: translateX(-50%) translateY(40px) scale(1.8);\n opacity: 0;\n }\n}\n\n.window {\n background-color: #151845;\n height: 10px;\n width: 10px;\n border: 2px solid #b8d2ec;\n border-radius: 50%;\n position: relative;\n top: 17px;\n left: 5px;\n}\n\n.curve {\n width: 100%;\n height: 100%;\n position: absolute;\n animation: rotate 10s linear infinite;\n fill: transparent;\n}\n@keyframes rotate {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n.curve text {\n letter-spacing: 20px;\n text-transform: uppercase;\n font:\n 1.5em \"Fira Sans\",\n sans-serif;\n fill: #95d5ff;\n filter: drop-shadow(0 2px 8px rgb(21, 117, 207));\n}\n"}

massive-firefox-90

👁 实时预览

📝 源代码