{"html":"

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

\n","css":".loader {\n position: relative;\n width: 18rem; /* Reposition the obstacles and the bird if the width is changed */\n aspect-ratio: 1;\n overflow: hidden;\n border-radius: 50%;\n background: linear-gradient(to bottom, #6ccee7 60%, white);\n}\n#bird {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-80%, -50%);\n width: 3rem;\n height: auto;\n animation: flap 500ms linear infinite;\n}\n.flappyBirdScene,\n.flappyBirdSceneBottom {\n display: flex;\n width: 20rem;\n top: -23%;\n position: relative;\n}\n.sceneTop {\n display: flex;\n width: fit-content;\n animation: flow 5s linear infinite;\n}\n.sceneBottom {\n display: flex;\n width: fit-content;\n animation: flowBottom 5s linear infinite;\n}\n#birdObstacle {\n height: 8rem;\n width: 2rem;\n background: linear-gradient(\n to right,\n #9de558 0px,\n #9de558 3px,\n #e7ff8d 3px,\n #e7ff8d 5px,\n #9de858 5px,\n #9de858 10px,\n #74c029 10px,\n #74c029 13px,\n #9de558 13px,\n #9de558 15px,\n #74c029 22px,\n #74c029 28px,\n #59811a 28px,\n #59811a 100%\n );\n border: solid;\n position: relative;\n}\n.flappyBirdSceneBottom {\n bottom: -25%;\n left: 0;\n}\n#birdObstacle::after {\n content: \"\";\n position: absolute;\n width: 135%;\n height: 1.25rem;\n top: 100%;\n left: 50%;\n border: solid;\n transform: translate(-50%, 0);\n background: linear-gradient(\n to right,\n #9de558 0px,\n #9de558 3px,\n #e7ff8d 3px,\n #e7ff8d 5px,\n #9de858 5px,\n #9de858 10px,\n #74c029 10px,\n #74c029 13px,\n #9de558 13px,\n #9de558 15px,\n #74c029 22px,\n #74c029 28px,\n #59811a 28px,\n #59811a 100%\n );\n}\n.birdObs2 {\n transform: translate(0%, 15%);\n left: 15%;\n}\n.birdObs3 {\n transform: translate(0, 18%);\n left: 30%;\n}\n.birdObs4 {\n transform: translate(0, 15%);\n left: 45%;\n}\n@keyframes flap {\n from {\n transform: translate(-80%, -50%);\n }\n 25% {\n transform: translate(-80%, -50%) rotate(-15deg);\n }\n 50% {\n transform: translate(-80%, -12%) rotate(5deg);\n }\n 100% {\n transform: translate(-80%, -50%);\n }\n}\n@keyframes flow {\n from {\n transform: translate(0, -43%);\n }\n to {\n transform: translate(-50%, -43%);\n }\n}\n@keyframes flowBottom {\n from {\n transform: translate(0, 75%) rotateX(180deg);\n }\n to {\n transform: translate(-50%, 75%) rotateX(180deg);\n }\n}\n"}

tender-baboon-47

👁 实时预览

📝 源代码