{"html":"

\n \n \n

","css":"button {\n width: 180px;\n height: 55px;\n border-radius: 50px;\n border: solid 4px rgba(255, 255, 255, 0);\n background-clip: padding-box;\n box-shadow: 0 4px 20px -2px rgba(39, 94, 254, 0.5);\n background-color: hsl(241deg 44% 49%);\n font-size: 20px;\n letter-spacing: 1px;\n font-weight: 100;\n position: relative;\n cursor: pointer;\n color: white;\n}\n\n.loading {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 7px;\n z-index: 0;\n}\n\n.loading i {\n width: 5px;\n height: 5px;\n background-color: white;\n display: inline-flex;\n border-radius: 100%;\n animation-name: loading5234;\n animation-iteration-count: infinite;\n animation-duration: 1s;\n}\n\n@keyframes loading5234 {\n 100% {\n opacity: 0;\n }\n}\n\ninput:checked + button {\n transition-delay: 4s;\n background-color: #31cb20;\n box-shadow: 0 4px 20px -2px rgb(49 203 32);\n}\n\n.title, .approved {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n width: 100%;\n display: block;\n font-size: 15px;\n}\n\nbutton .title {\n background-color: hsl(241deg 44% 49%);\n width: 90%;\n}\n\ninput:checked + button .approved {\n transition-delay: 4s;\n visibility: visible;\n opacity: 1;\n background-color: #31cb20;\n width: 90%;\n}\n\ninput:checked + button .title {\n visibility: hidden;\n opacity: 0;\n transition: all .5s ease;\n}\n\ninput:not(:checked) + button .approved {\n visibility: hidden;\n opacity: 1;\n}\n\ninput {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%,-50%);\n z-index: 999;\n outline: none;\n width: 210px;\n height: 60px;\n border-radius: 50px;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n}\n\n.plane {\n width: 55px;\n height: 55px;\n border-radius: 100%;\n position: absolute;\n left: 0;\n z-index: 9;\n top: 0;\n transition: none;\n background-color: transparent;\n opacity: 0;\n}\n\n.plane svg {\n width: 45px;\n height: 45px;\n position: absolute;\n left: 0px;\n top: 0px;\n transform: rotate(90deg) translate(-50%,-40%) scale(1);\n transition: all 0s ease;\n fill: #3c4a57;\n}\n\ninput:checked + button .plane {\n animation: airplane-route 4s forwards;\n animation-timing-function: cubic-bezier(0, 0, 0, 0);\n}\n\n@keyframes airplane-route {\n 0% {\n left: -300px;\n opacity: 1;\n transform: scale(2);\n }\n\n 20% {\n left: 0px;\n transform: scale(1);\n opacity: 1;\n }\n\n 40% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%);\n }\n\n 60% {\n left: 100%;\n opacity: 1;\n transform: translateX(-100%) translateY(-6%) rotate(180deg);\n }\n\n 80% {\n left: 0%;\n opacity: 1;\n top: -6px;\n transform: translateX(0%) rotate(180deg);\n }\n\n 100% {\n left: 0%;\n opacity: 1;\n transform: translateX(0%) rotate(360deg);\n }\n}\n"}

yellow-husky-22

👁 实时预览

📝 源代码