Html 单击时的边框转换（不带javascript）

我的问题是，当我们在没有javascript的情况下单击按钮时，我需要在按钮的边框上添加5秒的转换。 有人能给我提个主意吗

.btn{
背景颜色：浅蓝色；
填充：10px；
边界：0；
边界半径：10px；
光标：指针；
过渡：边界5s；
}
.btn：活动{
边框：纯蓝5px
}

---

按钮

您可以通过转换或动画来完成此操作。 请注意，没有类似于

按钮：单击{}

的CSS选择器，因此您必须使用

:active

CSS选择器，它有一个缺点，即您必须按住（在您的情况下）5秒才能使动画工作

如果你想在“点击”上制作动画，你必须使用javascript，我不认为有任何方法可以使用纯CSS来实现这个技巧

#b1{
边框：5px纯红；
过渡：边界5s；
}
#b1：主动{
边框：5px纯绿色；
}
#b2{
边框：5px纯红；
}
#b2：活动{
动画持续时间：5s；
动画名称：边界转换；
}
@关键帧边界转换{
0% {
边框：5px纯红；
}
100% {
边框：5px纯绿色；
}
}

点击我
单击ME2

您可以使用添加所需的HTML。您还可以根据是否要单击并按住，潜在地使用

焦点

（尽管显然，焦点有其自身的警告，例如，如果您切换到元素，您会触发效果）