要给按钮添加标准触摸动画并摆脱按钮,可以使用CSS和JavaScript来实现。以下是一个示例代码:
HTML代码:
CSS代码:
#myButton {
position: relative;
animation-duration: 0.3s;
animation-name: buttonAnimation;
}
@keyframes buttonAnimation {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1);
}
}
JavaScript代码:
var myButton = document.getElementById("myButton");
myButton.addEventListener("touchstart", function() {
myButton.style.animationPlayState = "running";
});
myButton.addEventListener("touchend", function() {
myButton.style.animationPlayState = "paused";
});
上述代码中,我们使用了CSS的@keyframes
规则来定义按钮的动画效果。在JavaScript中,我们添加了touchstart
和touchend
事件监听器,分别在按钮被触摸时开始动画,松开触摸时暂停动画。
你可以根据自己的需要调整动画的持续时间、缩放比例和按钮的样式。