css 动画实现节流效果

news2025/8/3 6:43:53

今天在做节流操作时,无意间看到可以用css动画去实现节流效果,然后一顿操作发现果然可以,记录一下

CSS pointer-events 属性

pointer-events

一、 用css中的pointer-events(指针事件)、animation(动画)以及:active

  • 对点击事件进行限制,也就是禁用点击事件,利用pointer-events
    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
    值:none 不做反应auto 默认值
  • 利用动画animation,去改变当前按钮是否可点击
  • 利用伪类 :active 触发按钮时机,就是点击行为

例如:实现按钮节流,利用css动画的控制,比如一个动画控制按钮从禁用–>可点击的变化,每次点击都让动画重新执行一次,就能达到节流的效果

css pointer-events

<!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>css动画实现节流效果</title>
    <style>
      @keyframes throttle {/* 设置一下颜色区分,方便查看 */
        from {
          color: red;
          pointer-events: none;
        }
        to {
          color: green;
          pointer-events: all;
        }
      }
      button{/* 设置2秒时间间隔 */
        animation: throttle 2s step-end forwards;
      }
      button:active{
        animation: none;   /* 关闭动画 */
      }
    </style>
  </head>
  <body>
    <button onclick="fn()">普通按钮</button>
    <script>
      function fn() {
        console.log("1111");
      }
    </script>
  </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/15924.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WordPress做缓存Memcached Is Your Friend+Batcache

宝塔面板有两个地方有Memcached,一个是在软件商店的运行环境里面,一个是在php扩展里面,我们先安装PHP扩展中的Memcached ,然后wp后台搜索Memcached Is Your Friend安装插件。WordPress做缓存很给力。缓存命中率保持在 90%以上的WordPress 本地缓存加速方案。 默认我们看到命…

E-Payment Integrator Delphi Edition

E-Payment Integrator Delphi Edition 通过为组件提供处理信用卡和电子支票交易的直观界面&#xff0c;减轻了集成电子支付支持的复杂性。开发人员无需学习复杂的套接字编程或安全实现。通过使用电子支付集成器&#xff0c;开发人员能够针对当前支持的任何支付网关进行定位和开…

比较复杂的策略路由综合实验

下面是网络技能大赛策略这个模块的要求&#xff0c;单独拿出来整理一下 R1、R2、R3间运行OSPF&#xff0c;进程号20&#xff0c;规划单区域&#xff1a;区域0&#xff1b; VSU、R2、R3间运行OSPF&#xff0c;进程号21&#xff0c;规划单区域&#xff1a;区域0&#xff1b; …

JavaScript之事件高级(53rd)

1、注册事件(绑定事件) 给元素添加事件&#xff0c;称为注册事件或者绑定事件。 注册事件有两种方式&#xff1a;传统方式和方法监听注册方式 1、addEventListener事件监听方式 1、eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget&#xff08;目标对…

springMVC异常处理的知识点+异常处理案例

springMVC异常处理的知识点异常处理案例 异常介绍&#xff1a; 我们知道系统中的异常包括两类&#xff1a;预期异常和运行时异常RuntimeException,前者通过捕获异常从而获取异常信息&#xff0c;后者主要通过规范代码开发、测试等手段减少运行时异常的发生 在SpringMVC处理异…

有关服务器虚拟化的常见问题解答

虚拟化”一词经常使用&#xff0c;尤其是与服务器相关的时候。以下是一些有关服务器虚拟化常见问题的解答。 什么是服务器虚拟化? 虚拟化是一个经常应用于范围广泛的技术的术语。从本质上讲&#xff0c;虚拟化技术就是使用分布式软件硬件。在服务器虚拟化领域&#xff0c;这意…

Android

直接运行 最新版的 apktool 可以通过brew安装&#xff0c;命令如下 brew install apktool # 验证安装结果apktool -version (Mac)反编译Android APK详细操作指南[ApkTool,dex2jar,JD-GUI] - CrazyCodeBoy的技术博客官网|CrazyCodeBoy|Devio|专注移动技术开发(Android&I…

【计算机网络】广域网协议分析

注&#xff1a;最后有面试挑战&#xff0c;看看自己掌握了吗 文章目录广域网WAN广域网局域网区别PPP协议----链路层------广域网PPP协议组成3个ppp状态图PPP协议帧格式HDLC协议--------链路层------广域网帧格式------无监信PPP协议和HDLC&#x1f343;博主昵称&#xff1a;一拳…

通用Mapper获取数据表中id为0解决方法。千万别瞎改int为integer了

项目场景&#xff1a; 最近准备自己写一个框架。由于是舍弃了成熟框架&#xff0c;所以在集成一些组件的时候&#xff0c;发现了一些之前没有注意过的问题。 这次是集成通用mapper时出现的一个问题。。。 问题描述 使用通用Mapper的selectAll()方法后&#xff0c;得到的id值都…

Java【抽象类和接口】是什么?

文章目录前言一、抽象类1.什么是抽象类2.抽象类的特征3.抽象类的作用二、接口1.什么是接口2.语法规范3.接口的使用4.接口的特征5.实现多个接口6.接口间的继承总结前言 前篇文章分享过了 面向对象语言的三大特征&#xff1a;封装&#xff0c;继承&#xff0c;多态 本篇呢将继续…

LCR表测电容怎么实现连续测试?ATECLOUD云测试平台帮您解决

河南某企业在生产测试中需要用到LCR表测试电容的容量和损耗&#xff0c;目前在使用是德科技E4980a LCR 测试数据时&#xff0c;发现不能连续测试&#xff0c;不能自动记录数据。通过和纳米软件Namisoft沟通&#xff0c;希望我们可以实现连续测试并将测试数据自动记录&#xff0…

steam搬砖项目,当下最稳定长久的

我为什么这么推荐普通人来做CSGO搬砖&#xff0c;最主要的原因就两点&#xff0c;一是平台流量大知道的人少&#xff0c;二就是不需要什么成本&#xff01; CSGO是基于steam衍生出来的&#xff0c;steam的流量池有多大&#xff0c;想必大家都心知肚明&#xff0c; Steam平台是…

实验(一):开发环境的安装及基本操作

一、实验目的与任务 实验目的&#xff1a; 1. 掌握KeilC集成开发环境的安装及基本操作&#xff1b; 2. 掌握Protues仿真软件的安装及基本操作。 任务&#xff1a; 1.完成KeilC集成开发环境的安装&#xff0c;建立工程&#xff1b; 2. 完成Protues仿真软件的安装&#xff0c;建立…

[附源码]java毕业设计票务销售网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

Gartner发布首份中国RPA魔力象限报告,弘玑Cyclone被重点推荐

11月17日&#xff0c;国际权威研究机构Gartner重磅发布首份中国RPA魔力象限报告&#xff1a;《China Context: Magic Quadrant for Robotic Process Automation》。 毫无悬念&#xff0c;在2022全球RPA魔力象限报告&#xff08;Gartner RPA MQ&#xff09;中表现优异的弘玑Cyc…

魔百和CM311-1A_YST、(YM)_安卓9_S905L3A_默认开启ADB_纯净精简语音_完美线刷包

魔百和CM311-1A_YST、(YM)_安卓9_S905L3A_默认开启ADB_纯净精简语音_完美线刷包 固件特点&#xff1a; 1、修改dns&#xff0c;三网通用&#xff1b; 2、开放原厂固件屏蔽的市场安装和u盘安装apk&#xff1b; 3、无开机广告&#xff0c;无系统更新&#xff0c;不在被强制升…

什么是云原生的应用?

云原生应用的三个核心概念 链接&#xff1a;https://pan.baidu.com/s/10ocbDCGsdS3i7hEzvUlatA?pwdm9nr 提取码&#xff1a;m9nr –来自百度网盘超级会员V5的分享 脑图大家可以下载使用并补充 微服务 什么是单体应用&#xff1f; 传统的单体应用架构都是三层模式&#xff1…

分治策略与递归

目录分治策略分治概念递归概念分治策略的特征分治法步骤举例阶乘斐波那契数列打印数组数组中查找元素分治策略 分治概念 任何可以用计算机求解的问题所需要的时间都与其规模有关。问题规模越小&#xff0c;所解题所需要的时间就越小&#xff0c;从而也较容易处理。例如&#…

11.9 至 11.17 四道典型题记录: Counter 弹出 | map函数 | 子集求取 | 有序字符桶分装

11.9 至 11.17 四道典型题记录&#xff1a; Counter 弹出 | map函数 | 子集求取 | 有序字符桶分装 昨天休息的时候一直在想应该学习哪种语言&#xff0c;我想这也是好多人发愁无法下手的原因之一&#xff0c;今年找工作的时候发现更多的研究岗位需要的是 C 语言 或 C 语言&…

RocketMQ的事务消息和改造

什么是 rmq分布式事务消息&#xff1f; Apache RocketMQ在4.3.0版中已经支持分布式事务消息&#xff0c;这里RocketMQ采用了2PC的思想来实现了提交事务消息&#xff0c;同时增加一个补偿逻辑来处理二阶段超时或者失败的消息&#xff0c;如下图所示。 事务消息解决什么问题&…