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