{"html":"","css":"button {\n position: relative;\n width: 150px;\n height: 60px;\n overflow: hidden;\n border: 1px solid black;\n border-radius: 50px;\n padding-left: 35px;\n box-shadow: 2.9px 2.9px 2.2px rgba(0, 0, 0, 0.019),\n 5.2px 5.2px 5.3px rgba(0, 0, 0, 0.023),\n 7px 7px 10px rgba(0, 0, 0, 0.025),\n 8.7px 8.7px 17.9px rgba(0, 0, 0, 0.024),\n 11.3px 11.3px 33.4px rgba(0, 0, 0, 0.023),\n 20px 20px 80px rgba(0, 0, 0, 0.02);\n}\n\n.pika {\n position: absolute;\n top: -100%;\n left: 42%;\n transition: 0.5s all;\n animation: tilt 1.1s infinite ease-in-out;\n}\n\n@keyframes tilt {\n 0% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n\n 50% {\n transform: translate(-50%, -50%) rotate(10deg);\n }\n\n 100% {\n transform: translate(-50%, -50%) rotate(0deg);\n }\n}\n\n.pokeball {\n position: absolute;\n top: 25%;\n left: 10%;\n animation: rotate_4991 1s linear infinite;\n}\n\n@keyframes rotate_4991 {\n 0% {\n transform: rotate(0);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\nbutton:hover .pika {\n top: 90%;\n}\n\nbutton:hover .pokeball {\n animation: none;\n transform: scale(0);\n}\n\nbutton:hover .go {\n color: transparent;\n}\n\n.go {\n position: absolute;\n top: 18%;\n left: 45%;\n font-size: 30px;\n font-weight: 900;\n letter-spacing: 1px;\n}\n\n.pword, .pword2 {\n position: absolute;\n font-size: 13px;\n opacity: 0;\n animation: pulse-animation_0011 1s infinite;\n}\n\n@keyframes pulse-animation_0011 {\n 0% {\n transform: rotateZ(-30deg) scale(1);\n }\n\n 50% {\n transform: rotateZ(-30deg) scale(1.1);\n }\n\n 100% {\n transform: rotateZ(-30deg) scale(1);\n }\n}\n\n.pword {\n top: 30%;\n left: 72%;\n}\n\n.pword2 {\n top: 55%;\n left: 75%;\n}\n\nbutton:hover .pword, button:hover .pword2 {\n opacity: 1;\n}\n"}

fluffy-fly-35

👁 实时预览

📝 源代码