在纯CSS中单击元素时触发动画 [英] Trigger animation on element click in pure CSS

问题描述

我有一个简单的元素：

<a href="#" id="btn" onclick="return false">Click</a>

现在我可以通过改变这个元素的外观：active ：

#btn:active {
    background: red;
}

然而我想要的是元素将保持红色第二次我点击它而不改变HTML（所以没有复选框哈克）或javascript。有没有可以被滥用的聪明的招数？

What I'd like however is that the element will stay red for about a second after I clicked it without altering the HTML (so no checkbox hack) or javascript. Is there a smart trick that can be abused for this?

JsFiddle这里

推荐答案

回答自己的问题。通过滥用：not 伪类，我们可以在onclick发生后触发动画：

Answering my own question. By abusing the :not pseudo class we can trigger an animation after a onclick happened:

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}

这篇关于在纯CSS中单击元素时触发动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！