Question

我有一个希望正常显示为灰色的按钮，单击后会更改颜色并带有边框，效果会逐渐消失。

这几乎是相反的： https://codepen.io/anon/pen/BPJVZB，但是按住鼠标左键时背景颜色和边框不会褪色，而是瞬间消失，然后消失

.btn{
  height: 4rem;
  width: 4rem;
  background: grey;
  outline:none;
  border:none;
  transition: 0s;
}

.btn:active{
   background: green;
   color: white;
   outline: 1px solid white;
   outline-offset: -4px;
   transition: 0.5s;
 }

我可以用背景复制所需的效果，但是边框永远不会消失。有人可以帮忙吗？

**编辑：我认为我对此描述不佳（尽管我认为前两个评论已经回答了我的问题-我认为我必须为边框颜色设置动画）。我正在尝试使这种效果也随着边框逐渐淡出，像这样：

https://codepen.io/anon/pen/BPJVZB

.btn{
  height: 4rem;
  width: 4rem;
  background: grey;
  outline:none;
  border:none;
  transition: 0s .2s;
}

.btn:active{
   background: green;
   color: white;
   outline: 1px solid white;
   outline-offset: -4px;
   transition: 0s;
 }

Answer 1

是瞬间，然后消失

如果我的理解正确，您可以使用CSS animations。您可以为动画定义一个开始（绿色，带有白色边框等）和一个结束（初始状态），然后在:active时将其应用于按钮。

.btn {
  height: 4rem;
  width: 4rem;
  border: none;
  outline: none;
  background: grey;
}

.btn:active {
  animation-name: btn-flash;
  animation-duration: 0.5s; /* Change to make slower/faster */
}

@keyframes btn-flash {
  from {
    color: white;
    outline: 1px solid white;
    background: green;
    outline-offset: 0;
  }
  
  to {
    color: black;
    outline: 1px solid transparent;
    background: grey;
    outline-offset: -4px;
  }
}

<button class="btn">press</button>

Answer 2

没有javascript，您无法真正做到这一点。

尝试一些类似的事情（使用JQuery）

。您的颜色的元素

$(document).ready(function(){
    $(".your-element-to-color").click(function(){
        $(".your-element-to-color").css("background-color","#hexwhatever");
    });
});

您可以将背景色，边框色设为任何CSS值，只要它位于此.css动作中即可。

然后，在CSS内添加所需的任何过渡。

.your-element-to-color{
    transition:background-color 0.2s; /* Or however much time */
}

您可以进行任何CSS转换。字体大小，边框，边框颜色，边框半径，变换，背景大小，几乎所有内容。

此方法的工作方式是将颜色的新CSS值传递到CSS文件。如果我还记得JQuery不支持通过动画更改颜色，但是它将支持CSS更改颜色。然后，使用CSS3过渡，可以使它淡出您想要的快慢程度。

阅读一些有关过渡及其工作原理的信息。祝你好运！

：单击后按钮的活动状态消失

2 个答案: