{"html":"

\n","css":".loader-wrapper {\n position: relative;\n width: 120px;\n height: 120px;\n}\n\n.juggler {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.head {\n width: 24px;\n height: 24px;\n background: #2c3e50;\n border-radius: 50%;\n position: absolute;\n top: -34px;\n left: -12px;\n animation: head-drop 6s infinite;\n transform-origin: center bottom;\n}\n\n.body {\n width: 16px;\n height: 40px;\n background: #2c3e50;\n border-radius: 8px;\n position: absolute;\n top: -5px;\n left: -8px;\n}\n\n.arm {\n width: 8px;\n height: 32px;\n background: #2c3e50;\n border-radius: 4px;\n position: absolute;\n top: -2px;\n transform-origin: 4px 4px;\n}\n\n.right-arm {\n left: 2px;\n animation: right-arm-juggle 6s infinite;\n}\n\n.left-arm {\n left: -10px;\n animation: left-arm-juggle 6s infinite;\n}\n\n.ball {\n width: 14px;\n height: 14px;\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n margin-top: -12px;\n margin-left: -7px;\n}\n\n.ball-1 {\n background: #ff4757;\n animation: ball1 6s infinite;\n}\n\n.ball-2 {\n background: #1e90ff;\n animation: ball2 6s infinite;\n}\n\n.ball-3 {\n background: #2ed573;\n animation: ball3 6s infinite;\n}\n\n@keyframes head-drop {\n 0%,\n 50% {\n transform: rotate(0deg) translate(0, 0);\n }\n 55%,\n 65% {\n transform: rotate(8deg) translate(1px, 0);\n }\n 60%,\n 70% {\n transform: rotate(-8deg) translate(-1px, 0);\n }\n 75% {\n transform: rotate(0deg) translate(0, 0);\n }\n 80%,\n 100% {\n transform: rotate(-20deg) translate(-2px, 5px);\n }\n}\n\n@keyframes right-arm-juggle {\n 0%,\n 8.33%,\n 16.66%,\n 25%,\n 33.33%,\n 41.66%,\n 50% {\n transform: rotate(-50deg);\n }\n 4.16%,\n 12.5%,\n 20.83%,\n 29.16%,\n 37.5%,\n 45.83% {\n transform: rotate(-10deg);\n }\n 55% {\n transform: rotate(-70deg);\n }\n 60% {\n transform: rotate(0deg);\n }\n 68% {\n transform: rotate(-80deg);\n }\n 75%,\n 100% {\n transform: rotate(10deg);\n }\n}\n\n@keyframes left-arm-juggle {\n 0%,\n 8.33%,\n 16.66%,\n 25%,\n 33.33%,\n 41.66%,\n 50% {\n transform: rotate(40deg);\n }\n 4.16%,\n 12.5%,\n 20.83%,\n 29.16%,\n 37.5%,\n 45.83% {\n transform: rotate(10deg);\n }\n 55% {\n transform: rotate(60deg);\n }\n 62% {\n transform: rotate(-10deg);\n }\n 70% {\n transform: rotate(70deg);\n }\n 75%,\n 100% {\n transform: rotate(-10deg);\n }\n}\n\n@keyframes ball1 {\n 0%,\n 25%,\n 50% {\n transform: translate(25px, 20px);\n animation-timing-function: ease-out;\n opacity: 1;\n }\n 8.33%,\n 33.33% {\n transform: translate(0px, -45px);\n animation-timing-function: ease-in;\n }\n 16.66%,\n 41.66% {\n transform: translate(-25px, 20px);\n animation-timing-function: linear;\n }\n 58.33% {\n transform: translate(15px, -65px);\n animation-timing-function: ease-in;\n }\n 66.66% {\n transform: translate(-30px, 30px);\n animation-timing-function: linear;\n }\n 75% {\n transform: translate(30px, 15px);\n animation-timing-function: ease-in;\n }\n 80% {\n transform: translate(35px, 60px);\n animation-timing-function: ease-out;\n }\n 85% {\n transform: translate(40px, 50px);\n animation-timing-function: ease-in;\n }\n 90% {\n transform: translate(45px, 60px);\n opacity: 1;\n }\n 95%,\n 100% {\n transform: translate(45px, 60px);\n opacity: 0;\n }\n}\n\n@keyframes ball2 {\n 0%,\n 25%,\n 50% {\n transform: translate(-25px, 20px);\n animation-timing-function: linear;\n opacity: 1;\n }\n 8.33%,\n 33.33% {\n transform: translate(25px, 20px);\n animation-timing-function: ease-out;\n }\n 16.66%,\n 41.66% {\n transform: translate(0px, -45px);\n animation-timing-function: ease-in;\n }\n 58.33% {\n transform: translate(35px, 10px);\n animation-timing-function: ease-out;\n }\n 66.66% {\n transform: translate(-10px, -55px);\n animation-timing-function: ease-in;\n }\n 75% {\n transform: translate(-35px, 25px);\n animation-timing-function: linear;\n }\n 83% {\n transform: translate(-40px, 60px);\n animation-timing-function: ease-out;\n }\n 88% {\n transform: translate(-45px, 52px);\n animation-timing-function: ease-in;\n }\n 93% {\n transform: translate(-50px, 60px);\n opacity: 1;\n }\n 98%,\n 100% {\n transform: translate(-50px, 60px);\n opacity: 0;\n }\n}\n\n@keyframes ball3 {\n 0%,\n 25%,\n 50% {\n transform: translate(0px, -45px);\n animation-timing-function: ease-in;\n opacity: 1;\n }\n 8.33%,\n 33.33% {\n transform: translate(-25px, 20px);\n animation-timing-function: linear;\n }\n 16.66%,\n 41.66% {\n transform: translate(25px, 20px);\n animation-timing-function: ease-out;\n }\n 58.33% {\n transform: translate(-15px, 35px);\n animation-timing-function: linear;\n }\n 66.66% {\n transform: translate(35px, 0px);\n animation-timing-function: ease-out;\n }\n 75% {\n transform: translate(5px, -15px);\n animation-timing-function: ease-in;\n }\n 81% {\n transform: translate(10px, 60px);\n animation-timing-function: ease-out;\n }\n 86% {\n transform: translate(15px, 55px);\n animation-timing-function: ease-in;\n }\n 91% {\n transform: translate(20px, 60px);\n opacity: 1;\n }\n 96%,\n 100% {\n transform: translate(20px, 60px);\n opacity: 0;\n }\n}\n"}

nervous-fireant-50

👁 实时预览

📝 源代码