单击时没有JavaScript的边框过渡

时间:2019-05-31 10:19:55

标签: html css

我的问题是,当我们单击没有JavaScript的按钮时,我需要在按钮的边框上添加5秒的过渡时间。 谁能建议我一个主意

2 个答案:

答案 0 :(得分:0)

使用

  

:active

.btn{
  background-color: lightblue;
  padding:10px;
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition: border 5s;
}

.btn:active{
  border:solid blue 5px
}
<button class="btn">Button</button>

答案 1 :(得分:0)

您可以通过过渡或动画来实现。 请注意,没有button:click{}这样的CSS选择器,因此您必须使用:active css选择器,但缺点是,您必须按住(在您的情况下)5秒才能使动画作品。

如果您要在“点击”上播放动画,则必须使用javascript,我认为这里没有任何方法可以使用纯CSS来达到目的。

#b1 {
  border: 5px solid red;
  transition: border 5s;
}

#b1:active {
  border: 5px solid green;

}

#b2{
  border: 5px solid red;
}

#b2:active{
  animation-duration: 5s;
  animation-name: border_transition;
}

@keyframes border_transition {
  0% {
    border: 5px solid red;
  }
  100% {
    border: 5px solid green;
  }
}
<button id="b1">CLICK ME</button>
<button id="b2">CLICK ME2</button>