{"html":"

\n\n

\n","css":".loader {\n position: relative;\n width: 20px;\n height: 20px;\n}\n\n.stick {\n width: 5px;\n height: 150px;\n background-color: #a3541c;\n position: absolute;\n top: 0;\n left: 50%;\n transform: translate(-50%, 0%);\n z-index: -1;\n}\n\n.container {\n position: relative;\n width: 20px;\n height: 20px;\n transform: rotate(30deg) scale(0.77);\n animation: rotateAnimation 3s infinite linear;\n}\n\n.pin {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n background-color: white;\n z-index: 10;\n border-radius: 999px;\n}\n\n.paper-container {\n position: absolute;\n scale: 1.5;\n}\n\n.paper-leaf-1 {\n position: relative;\n width: 0;\n height: 0;\n clip-path: ellipse(50% 50% at 50% 109%);\n border-left: 30px solid transparent;\n border-right: 30px solid transparent;\n border-top-left-radius: 222px;\n border-top-right-radius: 222px;\n}\n\n.paper-leaf-2 {\n position: absolute;\n right: -1px;\n bottom: 0;\n width: 30px;\n height: 20.5px;\n border-bottom-right-radius: 2px;\n z-index: 2;\n}\n\n.paper-leaf-2::before {\n content: \"\";\n position: absolute;\n right: 1/2;\n bottom: 0;\n width: 24.5px;\n height: 20.5px;\n clip-path: ellipse(100% 100% at 0% 100%);\n border-top-right-radius: 999px;\n box-shadow:\n inset -5px 0px 3px -3px rgba(0, 0, 0, 0.2),\n 10px -10px 10px 0px rgba(255, 255, 255, 0.1);\n z-index: 1;\n}\n\n.red {\n top: 50%;\n left: 50%;\n transform: translate(-80%, -85%);\n z-index: 2;\n}\n\n.red-1 {\n border-bottom: 50px solid #ff5733;\n}\n\n.red-2 {\n background-color: #ff5733;\n}\n\n.rotate-90 {\n transform: rotate(90deg) translate(-75%, -10%);\n top: 50%;\n left: 50%;\n z-index: 3;\n}\n\n.yellow-1 {\n border-bottom: 50px solid #ffc300;\n}\n\n.yellow-2 {\n background-color: #ffc300;\n}\n\n.rotate-180 {\n transform: rotate(180deg) translate(-16%, -17%);\n top: 50%;\n left: 50%;\n z-index: 4;\n}\n\n.green-1 {\n border-bottom: 50px solid #2ecc71;\n}\n\n.green-2 {\n background-color: #2ecc71;\n}\n\n.rotate-270 {\n transform: rotate(270deg) translate(-22%, -90%);\n top: 50%;\n left: 50%;\n z-index: 5;\n}\n\n.blue-1 {\n border-bottom: 50px solid #3498db;\n}\n\n.blue-2 {\n background-color: #3498db;\n}\n\n.grass-container {\n position: absolute;\n top: 500%;\n display: flex;\n align-items: end;\n justify-content: center;\n z-index: -2;\n}\n\n.line {\n position: absolute;\n right: 150px;\n top: 150px;\n z-index: -2;\n}\n\n.line:before {\n content: \"\";\n position: absolute;\n background-color: #6a994e;\n width: 100px;\n height: 50px;\n border-radius: 50px 50px 0 0;\n top: -50px;\n left: 50px;\n box-shadow: 100px 0 #78a85b;\n}\n\n.line:after {\n content: \"\";\n position: absolute;\n background-color: #78a85b;\n width: 50px;\n height: 25px;\n border-radius: 50px 50px 0 0;\n top: -25px;\n left: 10px;\n box-shadow:\n 50px 0 #55803c,\n 105px 0 #6a994e,\n 195px 0 #6a994e,\n 225px 0 #a7c957;\n}\n\n@keyframes rotateAnimation {\n from {\n transform: rotate(30deg) scale(0.77);\n }\n to {\n transform: rotate(390deg) scale(0.77);\n }\n}\n"}

hungry-kangaroo-29

👁 实时预览

📝 源代码