{"html":"\n

\n","css":".rocket {\n position: absolute;\n top: 20%;\n width: 80px;\n left: calc(50% - 40px);\n}\n\n.rocket .rocket-body {\n width: 80px;\n left: calc(50% - 50px);\n animation: bounce 0.5s infinite;\n}\n\n.rocket .rocket-body .body {\n background-color: #dadada;\n height: 180px;\n left: calc(50% - 50px);\n border-top-right-radius: 100%;\n border-top-left-radius: 100%;\n border-bottom-left-radius: 50%;\n border-bottom-right-radius: 50%;\n border-top: 5px solid #f5f5f5;\n}\n\n.rocket .rocket-body:before {\n content: '';\n position: absolute;\n left: calc(50% - 24px);\n width: 48px;\n height: 13px;\n background-color: #554842;\n bottom: -13px;\n border-bottom-right-radius: 60%;\n border-bottom-left-radius: 60%;\n}\n\n.rocket .window {\n position: absolute;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background-color: #a75248;\n left: calc(50% - 25px);\n top: 40px;\n border: 5px solid #b4b2b2;\n}\n\n.rocket .fin {\n position: absolute;\n z-index: -100;\n height: 55px;\n width: 50px;\n background-color: #a75248;\n}\n\n.rocket .fin-left {\n left: -30px;\n top: calc(100% - 55px);\n border-top-left-radius: 80%;\n border-bottom-left-radius: 20%;\n}\n\n.rocket .fin-right {\n right: -30px;\n top: calc(100% - 55px);\n border-top-right-radius: 80%;\n border-bottom-right-radius: 20%;\n}\n\n.rocket .exhaust-flame {\n position: absolute;\n top: 90%;\n width: 28px;\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n height: 150px;\n left: calc(50% - 14px);\n animation: exhaust 0.2s infinite;\n}\n\n.rocket .exhaust-fumes li {\n width: 60px;\n height: 60px;\n background-color: #f5f5f5;\n list-style: none;\n position: absolute;\n border-radius: 100%;\n}\n\n.rocket .exhaust-fumes li:first-child {\n width: 200px;\n height: 200px;\n bottom: -300px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(2) {\n width: 150px;\n height: 150px;\n left: -120px;\n top: 260px;\n animation: fumes 3.2s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(3) {\n width: 120px;\n height: 120px;\n left: -40px;\n top: 330px;\n animation: fumes 3s 1s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(4) {\n width: 100px;\n height: 100px;\n left: -170px;\n animation: fumes 4s 2s infinite;\n top: 380px;\n}\n\n.rocket .exhaust-fumes li:nth-child(5) {\n width: 130px;\n height: 130px;\n left: -120px;\n top: 350px;\n animation: fumes 5s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(6) {\n width: 200px;\n height: 200px;\n left: -60px;\n top: 280px;\n animation: fumes2 10s infinite;\n}\n\n.rocket .exhaust-fumes li:nth-child(7) {\n width: 100px;\n height: 100px;\n left: -100px;\n top: 320px;\n}\n\n.rocket .exhaust-fumes li:nth-child(8) {\n width: 110px;\n height: 110px;\n left: 70px;\n top: 340px;\n}\n\n.rocket .exhaust-fumes li:nth-child(9) {\n width: 90px;\n height: 90px;\n left: 200px;\n top: 380px;\n animation: fumes 20s infinite;\n}\n\n.star li {\n list-style: none;\n position: absolute;\n}\n\n.star li:before, .star li:after {\n content: '';\n position: absolute;\n background-color: #f5f5f5;\n}\n\n.star li:before {\n width: 10px;\n height: 2px;\n border-radius: 50%;\n}\n\n.star li:after {\n height: 8px;\n width: 2px;\n left: 4px;\n top: -3px;\n}\n\n.star li:first-child {\n top: -30px;\n left: -210px;\n animation: twinkle 0.4s infinite;\n}\n\n.star li:nth-child(2) {\n top: 0;\n left: 60px;\n animation: twinkle 0.5s infinite;\n}\n\n.star li:nth-child(2):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(2):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n.star li:nth-child(3) {\n left: 120px;\n top: 220px;\n animation: twinkle 1s infinite;\n}\n\n.star li:nth-child(4) {\n left: -100px;\n top: 200px;\n animation: twinkle 0.5s ease infinite;\n}\n\n.star li:nth-child(5) {\n left: 170px;\n top: 100px;\n animation: twinkle 0.4s ease infinite;\n}\n\n.star li:nth-child(6) {\n top: 87px;\n left: -79px;\n animation: twinkle 0.2s infinite;\n}\n\n.star li:nth-child(6):before {\n height: 1px;\n width: 5px;\n}\n\n.star li:nth-child(6):after {\n width: 1px;\n height: 5px;\n top: -2px;\n left: 2px;\n}\n\n@keyframes fumes {\n 50% {\n transform: scale(1.5);\n background-color: transparent;\n }\n\n 51% {\n transform: scale(0.8);\n }\n\n 100% {\n background-color: #f5f5f5;\n transform: scale(1);\n }\n}\n\n@keyframes bounce {\n 0% {\n transform: translate3d(0px, 0px, 0);\n }\n\n 50% {\n transform: translate3d(0px, -4px, 0);\n }\n\n 100% {\n transform: translate3d(0px, 0px, 0);\n }\n}\n\n@keyframes exhaust {\n 0% {\n background: linear-gradient(to bottom, transparent 10%, #f5f5f5 100%);\n }\n\n 50% {\n background: linear-gradient(to bottom, transparent 8%, #f5f5f5 100%);\n }\n\n 75% {\n background: linear-gradient(to bottom, transparent 12%, #f5f5f5 100%);\n }\n}\n\n@keyframes fumes2 {\n 50% {\n transform: scale(1.1);\n }\n}\n\n@keyframes twinkle {\n 80% {\n transform: scale(1.1);\n opacity: 0.7;\n }\n}\n "}

dangerous-dolphin-42

👁 实时预览

📝 源代码