{"html":"\n","css":".button {\n cursor: pointer;\n width: 150px;\n padding: 10px 5px 10px 5px;\n border-radius: 1000px;\n font-weight: bolder;\n font-family:\n system-ui,\n -apple-system,\n BlinkMacSystemFont,\n \"Segoe UI\",\n Roboto,\n Oxygen,\n Ubuntu,\n Cantarell,\n \"Open Sans\",\n \"Helvetica Neue\",\n sans-serif;\n font-size: 25px;\n box-shadow: inset 0px -9px 15px rgba(0, 0, 0, 0.693);\n line-height: 40px;\n background-color: #212121;\n color: rgb(121, 121, 121);\n border-top: none;\n border-left: none;\n border-right: none;\n border-bottom: rgba(71, 71, 71, 0.452) 1px solid;\n position: relative;\n transition: background-image 0.3s ease;\n}\n.button::before {\n z-index: -1;\n position: absolute;\n top: 0;\n left: 0;\n content: \"\";\n width: 150px;\n height: 60px;\n border-radius: 1000px;\n box-shadow: 3px 10px 10px rgba(0, 0, 0, 0.452);\n}\n.button:focus:not(:active) {\n transition: color 0.3s ease-in-out;\n color: greenyellow;\n text-shadow: 0 0 13px rgba(172, 255, 47, 0.329);\n box-shadow: inset 0px -5px 10px rgba(0, 0, 0, 0.5);\n}\n.button:focus:not(:active) {\n animation: clickButton 0.76s\n linear(\n 0,\n 0.234 11.8%,\n 0.403 18.4%,\n 0.624 24.7%,\n 0.999 33.3%,\n 0.76 39.9%,\n 0.705 42.6%,\n 0.687 45.2%,\n 0.703 47.7%,\n 0.753 50.3%,\n 0.999 57.7%,\n 0.89 61.8%,\n 0.865 63.6%,\n 0.857 65.3%,\n 0.865 67%,\n 0.887 68.8%,\n 0.999 74.5%,\n 0.957 77.5%,\n 0.944 80.2%,\n 0.954 82.7%,\n 1 88.2%,\n 0.988 91.9%,\n 1\n );\n}\n.Container_particles_plus {\n display: flex;\n justify-content: space-between;\n width: 70%;\n position: absolute;\n top: 30%;\n left: 40%;\n transform: translate(-50%, -50%);\n}\n.particles_plus {\n filter: drop-shadow(0 0 13px rgba(172, 255, 47, 0.849));\n}\n.particles_plus:nth-child(1) {\n display: none;\n opacity: 0;\n animation: particles_plus 0.9s linear;\n}\n.particles_plus:nth-child(2) {\n display: none;\n opacity: 0;\n animation: particles_plus 0.9s 0.4s linear;\n}\n.particles_plus:nth-child(3) {\n display: none;\n opacity: 0;\n animation: particles_plus 0.9s 0.1s linear;\n}\n.particles_plus:nth-child(4) {\n display: none;\n opacity: 0;\n animation: particles_plus 0.9s 0.2s linear;\n}\n\n.button:focus:not(:active) .particles_plus {\n display: block;\n}\n\n.button:active:not(:focus) .particles_plus {\n display: block;\n}\n@keyframes particles_plus {\n 0% {\n opacity: 0;\n transform: translate(50%);\n }\n 50% {\n opacity: 1;\n transform: translate(50%, -50%);\n }\n 90%,\n 100% {\n opacity: 0;\n transform: translate(50%, -100%);\n }\n}\n@keyframes clickButton {\n 0% {\n scale: 1;\n }\n 50% {\n scale: 0.9;\n }\n 100% {\n scale: 1;\n }\n}\n"}

shaggy-badger-65

👁 实时预览

📝 源代码