当前位置： 首页 > news >正文

css的active事件在手机端不生效的解决方法

news 2026/4/3 17:12:39

请添加图片描述
需求：需求就是实现点击图中的 “抽奖” 按钮，实现一个按钮Q弹的放大缩小动画

上面是实现的效果，pc端，点击触发 :active

问题：但是这种方式在模拟器上可以，真机H5一调试就没生效了，下面是简单的demo代码

img{width:100px;height:100px;background:red;
}
img:active {animation: shake 1s infinite;animation-iteration-count: 1;
}@keyframes shake {0% {transform: scale(0.98);opacity: 0.9;}50% {transform: scale(1);opacity: 0.7;}100% {transform: scale(1);opacity: 1;}
}

解决方案：在页面body添加一个 ontouchstart=""

没错，就是这么简单

<body ontouchstart="">...
</body>

相关文章：

css的active事件在手机端不生效的解决方法

需求&#xff1a;需求就是实现点击图中的 “抽奖” 按钮&#xff0c;实现一个按钮Q弹的放大缩小动画 上面是实现的效果&#xff0c;pc端&#xff0c;点击触发 :active 问题&#xff1a;但是这种方式在模拟器上可以&#xff0c;真机H5一调试就没生效了&#xff0c;下面是简单…...

编程日记 2024/3/26 1:24:55

00. 认识 Java 语言与安装教程

认识 Java Java 在 20 多年发展过程中&#xff0c;与时俱进&#xff0c;为了适应时代的需要&#xff0c;经历过两次重大的版本升级&#xff0c;一个是 Java 5&#xff0c;它提供了泛型等重要的功能。另一个是提供了 Lambda 表达式等重要的功能的 Java 8。 一些重要的 Java 的…...

编程日记 2024/3/26 1:23:53

数据结构-栈-004

1链栈 1.1栈结点结构体定义 /*定义一个数据结构*/ typedef struct student {char name[32];char sex;int age; }DATA_TYPE;/*定义一个栈结点*/ typedef struct stack_node {DATA_TYPE data;//数据域struct stack_node *pnext;//指针域 }STACK_NODE;1.2栈顶结点结构体定义 /*…...

编程日记 2024/3/26 1:22:52

（第76天）XTTS 升级：11GR2 到 19C

参考文档： 11G - Reduce Transportable Tablespace Downtime using Cross Platform Incremental Backup (Doc ID 1389592.1)V4 使用跨平台增量备份减少可传输表空间的停机时间 (Doc ID 2940565.1)前言 XTTS（Cross Platform Transportable Tablespaces，跨平台迁移表空间）是…...

编程日记 2024/3/26 1:21:51

修改网站源码，给电子商城的商品添加图片时商品id为0的原因

修改网站源码&#xff0c;给电子商城的商品添加图片时商品id为0的原因。花了几个小时查找原因。后来&#xff0c;由于PictureControl.class.php是复制CourseControl.class.php而来&#xff0c;于是对比了这两个文件&#xff0c;在CourseControl.class.php找到了不一样的关键几条…...

编程日记 2024/3/26 1:19:48

ffmpeg开发异步AI推理Filter

ffmpeg开发异步AI推理Filter 1.环境搭建、推理服务及客户端SDK2.编译原版ffmpeg3.测试原版ffmpeg的filter功能4.准备异步推理filter5.修改点6.重新编译ffmpeg7.测试异步推理filter本文旨在阐述如何开发一个FFmpeg Filter，该模块利用gRPC异步通信机制调用远程视频处理服务。这一…...

编程日记 2024/3/26 1:18:47

python与excel第七节 拆分工作簿

一个工作簿中多个工作表拆分为多个工作簿 假设一个excle工作簿中有多个工作表&#xff0c;现在需要将每个工作表拆分为单独的工作簿。 例子&#xff1a; import xlwings as xw# 设置生成文件的路径path D:\\TEST\\dataIn# 源文件的路径workbook_name D:\\TEST\\dataIn\\产…...

编程日记 2024/3/26 1:16:45

JS08-DOM节点完整版

DOM节点 查找节点 父节点 <div class="father"><div class="son">儿子</div></div><script>let son = document.querySelector(.son)console.log(son.parentNode);son.parentNode.style.display = none</script>通过…...

编程日记 2024/3/26 1:14:43

【python】python3基础

文章目录 一、安装pycharm 二、输入输出输出 print()文件输出&#xff1a;格式化输出&#xff1a; 输入input注释 三、编码规范四、变量保留字变量 五、数据类型数字类型整数浮点数复数 字符串类型布尔类型序列结构序列属性列表list &#xff0c;有序多维列表列表推导式 元组tu…...

编程日记 2024/3/26 1:13:42

计算机三级网络技术 选择+大题234笔记

上周停去准备计算机三级的考试啦&#xff0c;在考场上看到题目就知道这次稳了&#xff01;只有一周的时间&#xff0c;背熟笔记&#xff0c;也能稳稳考过计算机三级网络技术&#xff01;...

编程日记 2024/3/26 1:12:40

智能合约 之 ERC-721

ERC-721&#xff08;Non-Fungible Token&#xff0c;NFT&#xff09;标准 ERC-721是以太坊区块链上的一种代币标准&#xff0c;它定义了一种非同质化代币&#xff08;Non-Fungible Token&#xff0c;NFT&#xff09;的标准。NFT是一种加密数字资产&#xff0c;每个代币都具有独…...

编程日记 2024/3/26 1:11:39

== 和 equals 的区别是什么？

和 equals() 在 Java 中都是用于比较两个对象&#xff0c;但它们之间存在显著的差异&#xff1a; 比较的内容&#xff1a; &#xff1a;这是 Java 中的基本比较运算符&#xff0c;对于基本数据类型&#xff08;如 int, char, double 等&#xff09;&#xff0c;它比较的是值&a…...

编程日记 2024/3/26 1:09:37

VUE:内置组件＜Teleport＞妙用

一、<Teleport>简介 <Teleport>能将其插槽内容渲染到 DOM 中的另一个位置。也就是移动这个dom。 我们可以这么使用它: 将class为boxB的盒子移动到class为boxA的容器中。 <Teleport to".boxA"><div class"boxB"></div> &…...

编程日记 2024/3/26 1:08:36

ruoyi-nbcio-plus后端里mapstruct-plus和lombok的使用

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://122.227.135.243:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a…...

编程日记 2024/3/26 1:06:35

企业如何选择一个开源「好」项目？

开源 三句半​​​​​​​ 需求明确是关键 风险考量要周全 开源虽好不白捡 别忘合规&#xff01; 显然&#xff0c;开源已成为一股不可阻挡的洪流&#xff0c;企业拥抱开源&#xff0c;积极参与开源项目不仅是响应技术潮流的必然选择&#xff0c;更是实现自身技术创新、市场拓…...

编程日记 2024/3/26 1:05:34

c++算法学习笔记 (14) 并查集

1.合并集合 一共有 n 个数&#xff0c;编号是 1∼n&#xff0c;最开始每个数各自在一个集合中。 现在要进行 m 个操作&#xff0c;操作共有两种&#xff1a; M a b&#xff0c;将编号为 a 和 b 的两个数所在的集合合并&#xff0c;如果两个数已经在同一个集合中&#xff0c;…...

编程日记 2024/3/26 1:04:33

import * as的使用

import * as 是将一个模块的所有导出内容作为一个命名空间对象导入到当前模块中&#xff0c;其中 * 表示导入该模块中的所有导出内容&#xff0c;而 as 则用于指定导入的命名空间对象的名称。 例如&#xff1a;在 formatter 文件中有两个方法导出 const a () > {console.…...

编程日记 2024/3/26 1:03:32

微服务（基础篇-003-Nacos）

目录 Nacos注册中心&#xff08;1&#xff09; 认识和安装Nacos&#xff08;1.1&#xff09; Nacos快速入门&#xff08;1.2&#xff09; 服务注册到Nacos(1.2.1) Nacos服务分级存储模型&#xff08;1.3&#xff09; 配置集群&#xff08;1.3.1&#xff09; 根据集群修改…...

编程日记 2024/3/26 1:00:29

java数据结构与算法刷题-----LeetCode215. 数组中的第K个最大元素

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 解题思路&#xff1a;时间复杂度O( n n n)&#xff0c;空间复杂度…...

编程日记 2024/3/26 0:57:25

Springboot 整合 Knife4j （API文档生成工具）

目录 一、Knife4j 介绍 二、Springboot 整合 Knife4j 1、pom.xml中引入依赖包 2、在application.yml 中添加 Knife4j 相关配置 3、打开 Knife4j UI界面 三、关于Knife4j框架中常用的注解 1、Api 2、ApiOperation ​3、ApiOperationSupport(order X) ​4、ApiImplici…...

编程日记 2024/3/26 0:54:23

WindowResizer：打破窗口限制，实现Windows窗口自由调整的终极解决方案

WindowResizer&#xff1a;打破窗口限制&#xff0c;实现Windows窗口自由调整的终极解决方案 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 你是否曾遇到过某些应用程序窗口大小被…...

编程新知 2026/4/3 16:09:53

intv_ai_mk11部署教程：公网IP+端口直连的安全加固方案（反向代理+访问限流）

intv_ai_mk11部署教程&#xff1a;公网IP端口直连的安全加固方案&#xff08;反向代理访问限流&#xff09; 1. 环境准备与快速部署 1.1 系统要求 操作系统&#xff1a;Ubuntu 20.04/22.04 LTSGPU&#xff1a;NVIDIA显卡&#xff08;至少16GB显存&#xff09;内存&#xff1…...

编程新知 2026/4/3 15:21:21

Awesome Rust核心库精选：异步编程与网络开发

Awesome Rust核心库精选&#xff1a;异步编程与网络开发 本文深入探讨了Rust生态系统中的核心库&#xff0c;重点分析了异步运行时&#xff08;Tokio与async-std&#xff09;、网络编程库、HTTP客户端/服务器框架、数据序列化工具链以及密码学与安全相关库。通过对比分析各库的…...

编程新知 2026/4/3 14:21:44

探索Muon社区生态：第三方库、工具与资源全解析

探索Muon社区生态&#xff1a;第三方库、工具与资源全解析 【免费下载链接】muon GPU based Electron on a diet 项目地址: https://gitcode.com/gh_mirrors/mu/muon Muon作为一款基于GPU加速的轻量级Electron替代品&#xff0c;凭借其高效的性能和精简的架构&#xff0…...

编程新知 2026/4/3 13:47:19

A*、遗传、蚁群优化和元胞自动机四种经典算法实现四种场景下六边形网格路径规划，Python代码

基于六边形网格的路径规划算法摘要路径规划是机器人导航、智能交通和游戏AI等领域的核心问题。本期推文基于六边形网格结构&#xff0c;系统地对比了四种经典路径规划算法&#xff1a;A*算法、遗传算法、蚁群优化算法和元胞自动机算法。通过设计四组不同规模和复杂度的测试场景…...

编程新知 2026/4/3 13:45:18

罗技鼠标宏终极指南：绝地求生压枪脚本完整配置教程

罗技鼠标宏终极指南&#xff1a;绝地求生压枪脚本完整配置教程 【免费下载链接】logitech-pubg PUBG no recoil script for Logitech gaming mouse / 绝地求生 罗技 鼠标宏 项目地址: https://gitcode.com/gh_mirrors/lo/logitech-pubg 你是否在《绝地求生》中被武器后坐…...

编程新知 2026/4/3 13:17:02

忍者像素绘卷应用场景：微信小程序‘忍者学院’像素头像认证系统

忍者像素绘卷应用场景&#xff1a;微信小程序忍者学院像素头像认证系统 1. 项目背景与价值 微信小程序"忍者学院"作为一款面向动漫爱好者的社交平台&#xff0c;面临着用户头像个性化需求日益增长的挑战。传统头像系统存在两个核心痛点&#xff1a; 同质化严重&am…...

编程新知 2026/4/3 13:17:02

MelonLoader终极指南：Unity游戏模组加载神器快速上手教程

MelonLoader终极指南&#xff1a;Unity游戏模组加载神器快速上手教程 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 你是否厌倦…...

编程新知 2026/4/3 12:54:39

LH320@ACP# 规格参数解析 + 应用分享

一、产品核心定位LH320 高集成度 USB‑C PD 3.2 DP Alt‑Mode 二合一控制芯片专为Type‑C 视频转接器、多功能扩展坞设计&#xff0c;单芯片实现&#xff1a;PD 快充协议 DP 视频输出 供电管理 系统控制。二、核心参数详细解析1. 协议与标准接口&#xff1a;USB Type‑C 1…...

编程新知 2026/4/3 12:46:36

多语言翻译工作流：OpenClaw协同千问3.5-27B实现文档自动本地化

多语言翻译工作流&#xff1a;OpenClaw协同千问3.5-27B实现文档自动本地化 1. 为什么需要智能翻译流水线&#xff1f; 去年参与一个开源项目时&#xff0c;我遇到了文档翻译的噩梦。团队需要将技术文档同步翻译成英、日、韩三种语言&#xff0c;传统流程是&#xff1a;先用机…...

编程新知 2026/4/3 12:14:23