{"html":"

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n

\n","css":"@keyframes fire {\n 0% {\n bottom: 0px;\n opacity: 0;\n }\n 9% {\n opacity: 1;\n }\n 10% {\n bottom: 180px;\n opacity: 0;\n }\n 11% {\n bottom: 0px;\n }\n\n 20% {\n bottom: 0px;\n opacity: 0;\n }\n 28% {\n opacity: 1;\n }\n 30% {\n bottom: 180px;\n opacity: 1;\n }\n 31% {\n opacity: 0;\n }\n 40% {\n bottom: 0;\n opacity: 0;\n }\n 50% {\n opacity: 1;\n bottom: 180px;\n }\n 51% {\n opacity: 0;\n }\n 60% {\n bottom: 0;\n opacity: 0;\n }\n 70% {\n opacity: 1;\n bottom: 180px;\n }\n 71% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes crawl-to-bottom {\n 0% {\n transform: rotate(183deg) translateX(50%);\n }\n 50% {\n transform: rotate(177deg) translateX(50%);\n }\n 100% {\n transform: rotate(183deg) translateX(50%);\n }\n}\n@keyframes crawl-to-top {\n 0% {\n transform: rotate(3deg) translateX(-50%);\n }\n 50% {\n transform: rotate(-3deg) translateX(-50%);\n }\n 100% {\n transform: rotate(3deg) translateX(-50%);\n }\n}\n@keyframes crawl-to-left {\n 0% {\n transform: translateY(-50%) rotate(-93deg);\n }\n 50% {\n transform: translateY(-50%) rotate(-87deg);\n }\n 100% {\n transform: translateY(-50%) rotate(-93deg);\n }\n}\n@keyframes crawl-to-right {\n 0% {\n transform: translateY(-50%) rotate(93deg);\n }\n 50% {\n transform: translateY(-50%) rotate(87deg);\n }\n 100% {\n transform: translateY(-50%) rotate(93deg);\n }\n}\n\n.uiverse {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 400px;\n width: 400px;\n}\n.ship {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n height: 96px;\n width: 96px;\n animation: rotate-ship 10s linear infinite;\n}\n.bullet {\n position: absolute;\n bottom: 150px;\n left: 50%;\n transform: translate(-50%);\n height: 30px;\n width: 5px;\n background-color: aqua;\n z-index: -1;\n opacity: 0;\n animation: fire 10s linear infinite;\n}\n\n.bug {\n position: absolute;\n}\n\n.bug-walk {\n animation: walk 10s linear infinite;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%);\n}\n.bug-walk-1 {\n animation: walk-1 10s linear infinite;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%);\n opacity: 1;\n}\n\n.bug-1 {\n animation: crawl-to-bottom 2ms ease infinite;\n z-index: 3;\n}\n\n.bug-walk-2 {\n animation: walk-2 10s linear 1s infinite;\n position: absolute;\n top: 100%;\n left: 50%;\n transform: translate(-50%);\n opacity: 0;\n}\n\n.bug-2 {\n animation: crawl-to-top 2ms ease 1s infinite;\n z-index: 3;\n}\n\n.bug-walk-3 {\n animation: walk-3 10s linear 2s infinite;\n position: absolute;\n top: 50%;\n left: 100%;\n transform: translateY(-50%);\n opacity: 0;\n}\n\n.bug-3 {\n animation: crawl-to-left 2ms ease 2s infinite;\n z-index: 3;\n}\n\n.bug-walk-4 {\n animation: walk-4 10s linear 3s infinite;\n position: absolute;\n top: 50%;\n left: -18%;\n transform: translateY(-50%);\n opacity: 0;\n}\n\n.bug-4 {\n animation: crawl-to-right 2ms ease 2s infinite;\n z-index: 3;\n}\n\n@keyframes walk-1 {\n 0% {\n transform: translateY(-150px);\n opacity: 1;\n }\n 10% {\n transform: translateY(0px);\n opacity: 1;\n }\n 11% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes walk-2 {\n 0% {\n opacity: 0;\n transform: translateY(50px);\n }\n 9% {\n opacity: 0;\n transform: translateY(50px);\n }\n 10% {\n transform: translateY(50px);\n opacity: 1;\n }\n 20% {\n opacity: 1;\n transform: translateY(-50px);\n }\n 21% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes walk-3 {\n 0% {\n opacity: 0;\n }\n 10% {\n opacity: 0;\n transform: translateX(50px);\n }\n 19% {\n opacity: 0;\n transform: translateX(50px);\n }\n 20% {\n transform: translateX(50px);\n opacity: 1;\n }\n 30% {\n opacity: 1;\n transform: translateX(-50px);\n }\n 31% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n@keyframes walk-4 {\n 0% {\n opacity: 0;\n }\n 20% {\n opacity: 0;\n transform: translateX(-50px);\n }\n 29% {\n opacity: 0;\n transform: translateX(-50px);\n }\n 30% {\n transform: translateX(-50px);\n opacity: 1;\n }\n 40% {\n opacity: 1;\n transform: translateX(50px);\n }\n 41% {\n opacity: 0;\n }\n 100% {\n opacity: 0;\n }\n}\n\n@keyframes rotate-ship {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n 10% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n 20% {\n transform: translate(-50%, -50%) rotate(180deg);\n }\n 30% {\n transform: translate(-50%, -50%) rotate(180deg);\n }\n 40% {\n transform: translate(-50%, -50%) rotate(90deg);\n }\n 50% {\n transform: translate(-50%, -50%) rotate(90deg);\n }\n 60% {\n transform: translate(-50%, -50%) rotate(270deg);\n }\n 70% {\n transform: translate(-50%, -50%) rotate(270deg);\n }\n 100% {\n transform: translate(-50%, -50%) rotate(1440deg);\n }\n}\n"}

terrible-treefrog-2

👁 实时预览

📝 源代码