我想做
background-color: green;
border: 5px solid green;
对于点击后仅 0.5 秒效果的按钮,为点击设置动画。我该怎么做?
最佳答案
您需要使用一些 JavaScript 来检测点击并更改样式。您可能会使用 CSS 动画,但您仍然需要 JavaScript 来触发它,所以我不确定是否值得努力让它在 CSS 中工作:
function setStyles(el, styles) {
Object.entries(styles).map(
([property, value]) => el.style[property] = value
)
}
const btn = document.querySelector("button")
btn.addEventListener("click", () => {
// capture original styles
const origStyles = {
background: btn.style.background,
border: btn.style.border,
}
// set temp styles
setStyles(btn, {
background: "green",
border: "5px solid green",
})
// reset original styles after 0.5 seconds
window.setTimeout(() => setStyles(btn, origStyles), 500)
})
<button>Click Me</button>
关于html - 如何使单击按钮的效果持续 0.5 秒?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59593585/