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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣438. 找到字符串中所有字母异位词

Problem: 438. 找到字符串中所有字母异位词 文章目录 题目描述思路及解法复杂度Code 题目描述 思路及解法 1.编写辅助函数bool same(vector& need, vector& matched)&#xff1a; 1.1 以need为标准&#xff0c;循环对比need和matched的每一个位置的元素值是否相等 2.获…

redis实际应用场景及并发问题的解决

业务场景 接下来要模拟的业务场景: 每当被普通攻击的时候&#xff0c;有千分之三的概率掉落金币&#xff0c;每回合最多爆出两个金币。 1.每个回合只有15秒。 2.每次普通攻击的时间间隔是0.5s 3.这个服务是一个集群&#xff08;这个要求暂时不实现&#xff09; 编写接口&…

【工作中问题解决实践 十二】线上如何排查CPU100%的情况

当我们把服务发布到服务器器&#xff0c;可能会因为一些问题造成我们的服务器CPU被打满甚至超过100%&#xff0c;那如果我们想知道到底上在做什么操作导致CPU持续过高呢&#xff1f;因为在线上只能通过日志看问题&#xff0c;或者排查到哪个进程或者哪个线程持续占用CPU。然后才…

Avue框架实现图表的基本知识 | 附Demo(全)

目录 前言1. 柱状图2. 折线图3. 饼图4. 刻度盘6. 仪表盘7. 象形图8. 彩蛋8.1 饼图8.2 柱状图8.3 折线图8.4 温度仪表盘8.5 进度条 前言 以下Demo&#xff0c;作为初学者来说&#xff0c;会相应给出一些代码注释&#xff0c;可相应选择你所想要的款式 对于以下Demo&#xff0c…

【云开发笔记No.9】Kanban与敏捷开发

Kanban看板起源于丰田。 看板&#xff08;Kanban&#xff09;一词来自日文&#xff0c;本义是可视化卡片。如下图所示&#xff0c;看板工具的实质是&#xff1a;后道工序在需要时&#xff0c;通过看板向前道工序发出信号——请给我需要数量的输入&#xff0c;前道工序只有得到看…

C# 特性(Attribute)

C# 特性&#xff08;Attribute&#xff09; 文章目录 C# 特性&#xff08;Attribute&#xff09;Obsolete语法示例代码 创建自定义特性&#xff08;Attribute&#xff09; Obsolete 这个预定义特性标记了不应被使用的程序实体。它可以让您通知编译器丢弃某个特定的目标元素。例…

五、初识Django

初识Django 1.安装django2.创建项目2.1第一种方式&#xff1a;在终端2.2第二种方式&#xff1a;Pycharm 3.创建app4.快速上手4.1再写一个页面4.2templates模板4.3静态文件4.3.1static目录4.3.2引用静态文件 5.模板语法案例&#xff1a;伪联通新闻中心6.请求和相应案例&#xff…

图像变换(python)

前言 这个Python没学过&#xff0c;写的是真的不方便&#xff0c;有很多问题还没解决&#xff0c;暂时不想写了&#xff0c;感兴趣的同学可以完善一下。设计的思路就是摆几个控件然后将对应的函数实现&#xff0c;这个Python的坐标放置以及控件的大小我没弄懂&#xff0c;算出…

3月份的倒数第二个周末有感

坐在图书馆的那一刻&#xff0c;忽然感觉时间的节奏开始放缓。今天周末因为我们两都有任务需要完成&#xff0c;所以就选了嘉定图书馆&#xff0c;不得不说嘉定新城远香湖附近的图书馆真的很有感觉。然我不经意回想起学校的时光&#xff0c;那是多么美好且短暂的时光。凝视着窗…

如何进行Modbus转Profinet网关的调试与故障排除

Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;带有网口和串口很大限度地解决了设备接口不统一的问题&#xff0c;支持485和232&#xff0c;可以实现从Modbus通信协议到Profinet通信协议的无缝转换&#xff0c;为不同协议之间的互联互通提供了便利。 Modbus转Profine…

时间戳的转换-unix时间戳转换为utc时间(python实现)

import datetimetimestamp = 1711358882# 将时间戳转换为UTC时间 utc_time = datetime.datetime.utcfromtimestamp(timestamp)# 格式化并输出时间 formatted_time = utc_time.strftime(%Y-%m-%d %H:%M:%S) print(formatted_time)同样:UTC如何转换为unix时间戳 from datetime …

Axure案例分享—折叠面板(附下载地址)

今天和大家分享的Axure案例是折叠面板 折叠面板是移动端APP中常见的组件之一&#xff0c;有时候也称之为手风琴。咱们先看下Axure画出的折叠面板原型效果&#xff0c;然后再对该组件进行详细讲解。 一、功能介绍 折叠或展开多个面板内容&#xff0c;默认为展开一项内容&…

K8s-网络原理-中篇

引言 本文是《深入剖析 K8s》的学习笔记&#xff0c;相关图片和案例可从https://github.com/WeiXiao-Hyy/k8s_example中获取&#xff0c;欢迎 ⭐️! 上篇主要介绍了 Flannel 插件为例&#xff0c;讲解了 K8s 里容器网络和 CNI 插件的主要工作原理。还有一种“纯三层”的网络方…

C语言程序与设计——预处理命令

宏 在C语言中宏有三种形式: 定义符号常量定义傻瓜表达式定义代码段 在使用宏的过程中需要注意的是&#xff0c;宏的作用仅仅是在预处理阶段对代码进行替换&#xff0c;而非进行运算&#xff0c;所以在使用时&#xff0c;如果出现了我们预期之外的结果&#xff0c;很有可能是宏…

Java代码基础算法练习-搬砖问题-2024.03.25

任务描述&#xff1a; m块砖&#xff0c;n人搬&#xff0c;男搬4&#xff0c;女搬3&#xff0c;两个小孩抬一砖&#xff0c;要求一次全搬完&#xff0c;问男、 女、小孩各若干&#xff1f; 任务要求&#xff1a; 代码示例&#xff1a; package M0317_0331;import java.util.S…

【Android】图解View事件分发机制

文章目录 View事件分发机制dispartchTouchEvent()dispatchTouchEvent() 方法主要负责什么&#xff1f; onTouchEvent(event) 点击事件分发的传递规则自上而下自下而上 View事件分发机制 View的事件分发机制是Android中非常核心的一个概念&#xff0c;它负责处理触摸事件&#…

SpringMVC | Spring MVC中的“拦截器”

目录: 一、拦截器 &#xff1a;1. 拦截器的 “概述”2. 拦截器的 “定义” (创建“拦截器”对象)3. 拦截器的 “配置” (让“拦截器”对象生效)4. 拦截器的 “执行流程”“单个拦截器”的执行流程“多个拦截器”的执行流程 二、应用案例一实现用户登录权限验证 作者简介 &#…

nav仿真(2)

开启仿真和建图 打开第一个窗口启动仿真&#xff1a; source devel/setup.bash export TURTLEBOT3_MODELburger roslaunch turtlebot3_gazebo turtlebot3_world.launch # 启动仿真打开第二个窗口&#xff0c;开始建图&#xff1a; source devel/setup.bash export TURTLEBOT3_…

举4例说明Python如何使用正则表达式分割字符串

在Python中&#xff0c;你可以使用re模块的split()函数来根据正则表达式分割字符串。这个函数的工作原理类似于Python内置的str.split()方法&#xff0c;但它允许你使用正则表达式作为分隔符。 示例 1: 使用单个字符作为分隔符 假设你有一个由逗号分隔的字符串&#xff0c;你可…

Redis入门到实战-第三弹

Redis入门到实战 Redis数据类型官网地址Redis概述Redis数据类型介绍更新计划 Redis数据类型 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#…