纯CSS实现按钮防止重复点击

[{"insert":"思路：\n1，使用css动画让按钮被点击时立刻变成不可点击状态，动画结束后再恢复；\n2，每次点击重新开启动画，实现一直可以使用这种效果。\n\ncss样式：\nbutton{\n animation: throttle 1s step-end forwards;\n }\n button:active{\n animation: none;\n }\n @keyframes throttle {\n from {\n pointer-events: none;\n }\n to {\n pointer-events: all;\n }\n }\n\n其中，\nanimation我们可以直接再按钮自定义样式编辑\n"},{"insert":{"image":"R10580997-99aa938c19234930c632c5f01e393c2c_9417_372_198.png"}},{"insert":"\n @keyframes 部分我们需要使用自定义函数处理\n\nvar css = document.createElement('style');\n\ncss.innerHTML = `@keyframes throttle {\n from {\n pointer-events: none;\n }\n to {\n pointer-events: all;\n }`\n\ndocument.head.appendChild(css)\n\n初始化调用以上函数，或设置预加载。\n"}]