CSS 实现防止按钮重复点击

标签：opacity none throttle 点击 animation select 按钮 pointer CSS

代码如下：复制直接使用

body {
  display: grid;
  place-content: center;
  height: 100vh;
  margin: 0;
  gap: 15px;
  background: #f1f1f1;
  user-select: none;
}
button {
  user-select: none;
}
.throttle {
  animation: throttle 2s step-end forwards;
}
.throttle:active {
  animation: none;
}
@keyframes throttle {
  from {
    pointer-events: none;
    opacity: .5;
  }
  to {
    pointer-events: all;
    opacity: 1;
  }
}

效果：

<iframe class="code-editor-frame" data-code="code-editor-element" data-code-id="7164994189032161311" data-src="https://code.juejin.cn/pen/7164994189032161311" loading="lazy" src="https://code.juejin.cn/pen/7164994189032161311" style="display: inline; width: 100%"></iframe>

标签：opacity,none,throttle,点击,animation,select,按钮,pointer,CSS
From： https://www.cnblogs.com/freddyhuang/p/16917667.html