{"html":"

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

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

\n","css":".loader {\n width: 120px;\n aspect-ratio: 1 / 1;\n position: relative;\n container-type: size;\n transform: scaleY(-1);\n transform-style: preserve-3d;\n}\n\n.loader span {\n width: 90%;\n aspect-ratio: 10 / 2.25;\n position: absolute;\n top: 0%;\n left: 50%;\n translate: -50% 0%;\n border-radius: 50%;\n\n background: linear-gradient(to bottom, #ffe27a, #ffcc00, #f4b400, #d48a00);\n\n border: 1px solid #8c5a00;\n\n box-shadow:\n inset 0 2px 4px #fff2a6,\n inset 0 -3px 6px #c27a00;\n\n scale: 0.25;\n\n animation:\n travel 4.2s calc((-1 * 4.2s) * (var(--idx) / 10)) infinite linear,\n scaleAnim calc(4.2s * 0.5) calc((-1 * 4.2s) * (var(--idx) / 10)) infinite\n alternate;\n}\n\n@keyframes scaleAnim {\n 0% {\n opacity: 0;\n }\n\n 15%,\n 25% {\n opacity: 1;\n }\n\n 100% {\n opacity: 1;\n scale: 1;\n }\n}\n\n@keyframes travel {\n 0%,\n 5% {\n transform: translate3d(0, 0, 0);\n translate: -50% -5%;\n }\n\n 95%,\n 100% {\n transform: translate3d(0, 0, 10px);\n translate: -50% calc(100cqb - 95%);\n }\n}\n\n.bee {\n position: absolute;\n top: 50%;\n left: 50%;\n width: 22px;\n height: 22px;\n z-index: 9999;\n}\n\n.bee-svg {\n width: 100%;\n height: 100%;\n display: block;\n}\n\n.b1 {\n animation: fly1 9s linear infinite;\n}\n\n.b2 {\n animation: fly2 10s linear infinite;\n}\n\n.b3 {\n animation: fly3 8s linear infinite;\n}\n\n.b4 {\n animation: fly4 8s linear infinite;\n}\n\n.b5 {\n animation: fly5 9.5s linear infinite;\n}\n\n.b6 {\n animation: fly6 14.2s linear infinite;\n}\n\n@keyframes fly1 {\n 0% {\n transform: translate(-50px, -40px);\n }\n\n 20% {\n transform: translate(40px, -40px);\n }\n\n 40% {\n transform: translate(100px, 20px);\n }\n\n 60% {\n transform: translate(-60px, 80px);\n }\n\n 80% {\n transform: translate(-90px, 0px);\n }\n\n 100% {\n transform: translate(-40px, -40px);\n }\n}\n\n@keyframes fly2 {\n 0% {\n transform: translate(60px, 0px);\n }\n\n 25% {\n transform: translate(-80px, -50px);\n }\n\n 50% {\n transform: translate(-40px, 90px);\n }\n\n 75% {\n transform: translate(90px, 40px);\n }\n\n 100% {\n transform: translate(60px, 0px);\n }\n}\n\n@keyframes fly3 {\n 0% {\n transform: translate(0px, -60px);\n }\n\n 20% {\n transform: translate(80px, -20px);\n }\n\n 40% {\n transform: translate(40px, 60px);\n }\n\n 60% {\n transform: translate(-60px, 40px);\n }\n\n 80% {\n transform: translate(-20px, -60px);\n }\n\n 100% {\n transform: translate(0px, -80px);\n }\n}\n\n@keyframes fly4 {\n 0% {\n transform: translate(-50px, 10px);\n }\n\n 25% {\n transform: translate(30px, -60px);\n }\n\n 50% {\n transform: translate(60px, 40px);\n }\n\n 75% {\n transform: translate(-40px, 90px);\n }\n\n 100% {\n transform: translate(-70px, 10px);\n }\n}\n\n@keyframes fly5 {\n 0% {\n transform: translate(50px, -50px);\n }\n\n 25% {\n transform: translate(-100px, 20px);\n }\n\n 50% {\n transform: translate(80px, 80px);\n }\n\n 75% {\n transform: translate(-60px, -20px);\n }\n\n 100% {\n transform: translate(50px, -50px);\n }\n}\n\n@keyframes fly6 {\n 0% {\n transform: translate(-20px, 60px);\n }\n\n 20% {\n transform: translate(90px, -40px);\n }\n\n 40% {\n transform: translate(-80px, -70px);\n }\n\n 60% {\n transform: translate(40px, 90px);\n }\n\n 80% {\n transform: translate(100px, 10px);\n }\n\n 100% {\n transform: translate(-20px, 60px);\n }\n}\n"}

sweet-insect-73

👁 实时预览

📝 源代码