{"html":"

\n\n

\n","css":".planets {\n position: relative;\n height: 100px;\n width: 100px;\n display: flex;\n}\n\n#planetTrail1,\n#planetTrail2,\n#planetTrail3 {\n outline: solid rgb(101, 101, 101) 1px;\n border-radius: 50%;\n position: absolute;\n}\n\n#planetTrail1::after,\n#planetTrail2::after,\n#planetTrail3::after {\n content: \"\";\n width: 10px;\n height: 10px;\n position: absolute;\n border-radius: 50%;\n top: -5px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n#planetTrail1::after {\n background-color: rgb(213, 213, 120);\n}\n\n#planetTrail2::after {\n background-color: rgb(115, 174, 231);\n}\n\n#planetTrail3::after {\n background-color: rgb(180, 73, 49);\n}\n\n#planetTrail1 {\n width: 120px;\n height: 120px;\n animation: trails1 4s infinite;\n}\n\n#planetTrail2 {\n width: 170px;\n height: 170px;\n animation: trails2 4s infinite;\n}\n\n#planetTrail3 {\n width: 220px;\n height: 220px;\n animation: trails3 4s infinite;\n}\n\n@keyframes trails1 {\n 0% {\n transform: rotate(0deg);\n }\n 40% {\n transform: rotate(360deg);\n width: 120px;\n height: 120px;\n }\n 50% {\n width: 0px;\n height: 0px;\n }\n 90% {\n width: 0px;\n height: 0px;\n }\n 100% {\n width: 120px;\n height: 120px;\n }\n}\n\n@keyframes trails2 {\n 0% {\n transform: rotate(0deg);\n }\n 40% {\n transform: rotate(250deg);\n width: 170px;\n height: 170px;\n }\n 50% {\n width: 0px;\n height: 0px;\n }\n 90% {\n width: 0px;\n height: 0px;\n }\n 100% {\n width: 170px;\n height: 170px;\n }\n}\n\n@keyframes trails3 {\n 0% {\n transform: rotate(0deg);\n }\n 40% {\n transform: rotate(170deg);\n width: 220px;\n height: 220px;\n }\n 50% {\n width: 0px;\n height: 0px;\n }\n 90% {\n width: 0px;\n height: 0px;\n }\n 100% {\n width: 220px;\n height: 220px;\n }\n}\n\n#star {\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: rgb(255, 170, 0);\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: bouncingStar 4s infinite;\n}\n\n#starShadow {\n position: absolute;\n width: 50px;\n height: 20px;\n background-color: rgb(255, 170, 0);\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, 100%);\n filter: blur(5px);\n opacity: 0.3;\n animation: shadowAnimation 4s infinite;\n}\n\n@keyframes bouncingStar {\n 0% {\n transform: translate(-50%, -50%);\n }\n 10% {\n transform: translate(-50%, -30%);\n }\n 20% {\n transform: translate(-50%, -50%);\n }\n 30% {\n transform: translate(-50%, -30%);\n }\n 40% {\n transform: translate(-50%, -50%);\n width: 50px;\n height: 50px;\n }\n 50% {\n width: 0px;\n height: 0px;\n }\n 90% {\n width: 0px;\n height: 0px;\n }\n 100% {\n width: 50px;\n height: 50px;\n }\n}\n\n@keyframes shadowAnimation {\n 0% {\n opacity: 0.1;\n }\n 10% {\n opacity: 0.4;\n }\n 20% {\n opacity: 0.1;\n }\n 30% {\n opacity: 0.4;\n }\n 40% {\n opacity: 0.1;\n }\n 50% {\n opacity: 0;\n }\n 90% {\n opacity: 0;\n }\n 100% {\n opacity: 0.1;\n }\n}\n\n#blackHole {\n position: absolute;\n width: 50px;\n height: 50px;\n background-color: rgb(0, 0, 0);\n outline: orange solid 5px;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n animation: bouncingBlackHole 4s infinite;\n}\n\n@keyframes bouncingBlackHole {\n 0% {\n height: 0px;\n width: 0px;\n }\n 40% {\n width: 0px;\n height: 0px;\n }\n 50% {\n width: 50px;\n height: 50px;\n }\n 90% {\n width: 50px;\n height: 50px;\n }\n 100% {\n width: 0px;\n height: 0px;\n }\n}\n\n#blackHoleDisk1 {\n position: absolute;\n width: 68px;\n height: 68px;\n clip-path: inset(50% 0 0 0);\n border: black 10px solid;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(70deg);\n animation: diskAn 4s infinite;\n}\n\n#blackHoleDisk2 {\n position: absolute;\n width: 70px;\n height: 70px;\n clip-path: inset(0 0 50% 0);\n border: rgb(245, 174, 8) 10px solid;\n border-radius: 50%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotateX(55deg);\n animation: diskAn 4s infinite;\n}\n\n@keyframes diskAn {\n 0% {\n height: 0px;\n width: 0px;\n border: orange 0px solid;\n }\n 40% {\n width: 0px;\n height: 0px;\n border: orange 0px solid;\n }\n 50% {\n width: 88px;\n height: 88px;\n border: orange 18px solid;\n }\n 90% {\n width: 88px;\n height: 88px;\n border: orange 18px solid;\n }\n 100% {\n width: 0px;\n height: 0px;\n border: orange 0px solid;\n }\n}\n\n#planet {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: rgb(255, 255, 255);\n border-radius: 50%;\n animation: planetAn 4s infinite;\n}\n\n@keyframes planetAn {\n 0% {\n opacity: 0;\n transform: translate(0px, 0px);\n z-index: 1;\n }\n 50% {\n opacity: 0;\n transform: translate(0px, 0px);\n z-index: 1;\n }\n 58% {\n opacity: 1;\n }\n 70% {\n opacity: 1;\n transform: translate(100px, 40px);\n z-index: 1;\n }\n 71% {\n z-index: 0;\n }\n 90% {\n z-index: 0;\n opacity: 1;\n transform: translate(-10px, 70px);\n }\n 100% {\n transform: translate(-10px, 70px);\n opacity: 0;\n }\n}\n"}

nervous-panda-86

👁 实时预览

📝 源代码