css实现节流

最新推荐文章于 2024-05-20 22:08:52 发布

万事胜意sy

最新推荐文章于 2024-05-20 22:08:52 发布

阅读量84

点赞数

分类专栏：笔记文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_50736511/article/details/128965287

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  button {
    /* step-end去掉动画的过度，也就是2s之前都不可点击，2s的时候可以点击 */
    /* forwards 保持动画的最后状态 */
    animation: throttle 2s step-end forwards;
  }

  /* 2s内按钮是不可点击的，一旦点击要让他重新执行动画，就要设置这个属性 */
  button:active {
    animation: none;
  }

  @keyframes throttle {
    from {
      /* 设置能否进行鼠标操作 */
      pointer-events: none;
    }

    to {
      pointer-events: all;
    }
  }
</style>

<body>
  <button id="btn">点击按钮</button>
</body>

</html>
<script>
  let btn = document.getElementById("btn")
  btn.onclick = function () {
    console.log("按钮点击了·······");
  }
</script>