在按钮自定义动画的最佳实践中,可以使用CSS和JavaScript来实现。下面是一个包含代码示例的解决方法:
HTML代码:
CSS代码:
@keyframes customAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.button-animation {
animation: customAnimation 1s infinite;
}
JavaScript代码:
const myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
myButton.classList.add('button-animation');
setTimeout(function() {
myButton.classList.remove('button-animation');
}, 1000);
});
上述代码实现了一个按钮点击时的自定义动画效果。当按钮被点击时,通过添加button-animation
类来触发动画,动画效果为按钮在1秒内缩放到1.2倍,然后再恢复到原始大小。使用animation
属性将动画应用到按钮上,并通过infinite
参数使动画无限循环。
通过JavaScript的事件监听,当按钮被点击时,添加动画类,并在1秒后移除动画类,以实现点击按钮时的动画效果。