我的问题是,当我们单击没有JavaScript的按钮时,我需要在按钮的边框上添加5秒的过渡时间。 谁能建议我一个主意
答案 0 :(得分:0)
使用
.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>