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

news2024/11/18 10:40:20

请添加图片描述
需求:需求就是实现点击图中的 “抽奖” 按钮,实现一个按钮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>

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

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

相关文章

图像几何变换(仿射变换和透视变换...)及python-opencv实现

文章目录 图像变换类型仿射变换透视变换python-opencv实现参考文献 图像变换类型 图像几何变换主要包括以下几种类型&#xff1a; 平移&#xff08;Translation&#xff09;&#xff1a;将图像在水平或垂直方向上移动&#xff0c;不改变图像的尺寸和形状。缩放&#xff08;Sca…

【深度学习】基于机器学习的无机钙钛矿材料形成能预测,预测形成能,神经网络,回归问题

文章目录 任务分析数据处理处理离散数值处理缺失值处理不同范围的数据其他注意事项 我们的数据处理模型训练网页web代码、指导 任务分析 简单来说&#xff0c;就是一行就是一个样本&#xff0c;要用绿色的9个数值&#xff0c;预测出红色的那1个数值。 数据处理 在进行深度数…

linux命令详解——uniq,wc,tr

uniq uniq可以对查看内容去重 但在我们使用时会发现&#xff0c;uniq的去重逻辑是&#xff0c;当遇到连续多行内容相同时&#xff0c;去除重复行&#xff0c;而对间隔重复内容&#xff0c;无法实现去重功能 这里想到可以将sort与uniq结合使用&#xff0c;先对文件内容进行排序…

Visual Studio 插件 AnAPI++ for VS 2022

Anmial API abbreviation AnAPIis an automatically generated WebAPI project that has encapsulated Jwt Oauth2 token authentication, SqlSugar, Swagger, Nlog, Cross domain technologies, and supports Net6 and above versions Anmial API缩写AnAPI是一个自动生成的Web…

嵌入式开发--STM32G431RBTx-定时器中断流水灯

嵌入式开发–STM32G431RBTx-定时器中断流水灯 定时器工作原理 如图有反映stm32g431的定时器资源。 共10个定时器 定时器定时器类型个数TIM6&#xff0c;7基本定时器2TIM2&#xff0c;3&#xff0c;4全功能通用定时器3TIM15&#xff0c;16&#xff0c;17通用定时器(只有1或2个…

uniapp安装axios

先npm安装 npm i axios然后在项目里面建一个utils文件&#xff0c;再建一个index.js 以下是index.js代码&#xff1a; import axios from axios; const service axios.create({baseURL: //xxxx.xxxxx.com///你的请求接口域名, timeout: 6000, // request timeoutcrossDomai…

2024年通信工程专业-毕业论文

2024年毕业设计-通信专业VoLTE掉话分析资源-CSDN文库 毕业设计 ----移动通信中VoLTE信令流程分析 学生姓名 专业班级 学 号 指导教师 完成时间 …

比一比gitee、gitlab、github

gitee、gitlab、github&#xff0c;哪个是目前国内大型公司使用最多的呢&#xff1f;共同点&#xff1a;三者都是基于git的代码托管工具&#xff0c;都支持版本管理。 gitee&#xff1a;适合国内开发者&#xff0c;更友好的本地化服务&#xff0c;形成了一个适合中国宝宝学习的…

SQLiteC/C++接口详细介绍sqlite3_stmt类(十一)

返回&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍sqlite3_stmt类&#xff08;十二&#xff09; 43、sqlite3_reset sqlite3_reset 函数用于重置已经编…

【云呐】事业单位资产盘点报告总结怎么写

事业单位固定资产盘点报告总结主要内容包括:  一、概述  说明本次盘点的目的和任务  明确盘点范围(如某处所有固定资产)  说明盘点时间(起止日期)  二、准备工作  组建盘点工作组  制定盘点计划和工作流程  录入联网资产管理系统或编制盘点清单  三、盘点实施…

一站式App流量统计,Xinstall助您洞悉用户行为

在如今的移动互联网时代&#xff0c;App的推广和运营对于开发者来说至关重要。然而&#xff0c;想要精准掌握App的流量情况&#xff0c;却并不是一件容易的事情。这时&#xff0c;一款强大的App流量统计工具就显得尤为重要。而Xinstall&#xff0c;正是这样一款能够帮助开发者轻…

后端项目中构建前端模块问题记录

后端项目中在登陆页面使用jsp&#xff0c;后端项目会通过接口返回给前端几个js的路径&#xff0c;这几个js呢&#xff0c;是由后端先构建好&#xff0c;然后返回给前端路径的&#xff0c;前端通过这个路径访问js执行。。。 总之&#xff0c;很奇怪的项目。。 1、首先要安装no…

selenium自动化登录模块HTMLTestRunner测试报告

1.下载HTMLTestRunner.py放到python的Lib目录下&#xff0c;python3之后的&#xff0c;文件要修改以下内容&#xff1a; 第94行&#xff0c;将import StringIO修改成import io 第539行&#xff0c;将self.outputBuffer StringIO.StringIO()修改成self.outputBuffer io.Strin…

stable diffusion 提示词进阶语法-年龄身材肤色-学习小结

stable diffusion 提示词进阶语法-年龄&身材&肤色 前言年龄提示词青年&#xff08;18-25岁&#xff09;幼年、少年&#xff08;1-18&#xff09;中年&#xff08;35-60岁&#xff09;老年&#xff08;65-80岁 老爷爷 老奶奶&#xff09; 身材提示词肤色关键词(人物基础…

linux网络服务学习(3):tftp与sftp

1.TFTP TFTP是基于UDP协议实现的一个用来在客户机与服务器之间进行简单文件传输的协议&#xff0c;提供不复杂、开销不大的文件传输服务&#xff0c;不具备通常的FTP的许多功能。端口号为69。 1.1 centos7安装TFTP yum -y install tftp tftp-server #安装tftp客户端与服务器…

XSKY 智能存储,助力“数据要素 X”先进制造

3 月 21-22 日&#xff0c;主题为“突破 智行”的 IMC2024 第七届中国智造数字科技峰会在重庆召开。作为在先进制造领域拥有领先存储解决方案以及众多应用实践的企业&#xff0c;星辰天合受邀参加了此次峰会并荣获大会颁发的“最佳存储解决方案奖”。同时&#xff0c;星辰天合先…

QT gridlayout 循环设置组件,表格也通用 已解决

在需求中。经常遇到&#xff0c;表格 展示需求。 几乎都是json格式的。 // 列表配置文件QJsonArray listJsonArray getCfgJsonData("details_tab_table_config.json");if (listJsonArray.isEmpty()){return;}ui->gridWidget->setMaximumSize(QSize(310, 180)…

定制红酒:品质保障,从源头做起

云仓酒庄的洒派定制红酒&#xff0c;以其卓着的品质和与众不同的口感&#xff0c;赢得了众多消费者的喜爱。而这种品质的保障&#xff0c;正是从源头上开始的。 在葡萄种植方面&#xff0c;种植者对土壤、气候等自然条件进行严格的筛选和评估&#xff0c;确保葡萄能够在理想的环…

去中心化的 AI 数据供应:认识Grass,参与Grass

去中心化的 AI 数据供应&#xff1a;认识Grass&#xff0c;参与Grass &#x1f44b;&#xff1a;邀请链接☘️&#xff1a;Intro❓&#xff1a;看好Grass和即将推出的L2的原因有哪些&#xff1f;&#x1f4a1;&#xff1a;展望&#x1f50d;&#xff1a;总结 &#x1f44b;&…

express+mysql+vue,从零搭建一个商城管理系统15--快递查询(对接快递100)

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、安装md5&#xff0c;axios二、新建config/logistics.js三、修改routes/order.js四、查询物流信息五、试错与误区总结 前言 需求&#xff1a;主要学习express&#xff0c;所以先写service部分 快递100API…