css - 如何制作消失的发光效果

Question

假设我有一个按钮类

.mat-cancel-color {
    width: 160px;
    border: 1px solid #dddddd;
    color: #dddddd;
    background-color: white;
    border-radius: 25px;
}

每当我单击某些东西(不是“mat-cancel-color”按钮)时，我希望此类获得发光效果，该效果会在 .4s 内逐渐消失。

我是否应该创建一个新类，然后为该类赋予 box-shadow(glow) 属性，然后在 transition-duration 属性下方，然后再次赋予 box-shadow(no glow) 属性？因此:

click-class {
-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
box-shadow: 0px 0px 15px 10px rgba(255,255,0,1);
transition-duration: .4s;
-webkit-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
-moz-box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
box-shadow: 0px 0px 0px 0px rgba(255,255,0,1);
}

或者 transition-duration 仅在切换类时有效，还是在类内切换属性时也有效？如果是这样，我该怎么办？

编辑:将 transition-delay 误认为是 transition-duration。

Answer 1

您正在寻找的是 CSS 动画。主要是因为您不希望默认状态带有发光，这就是 transition 在这里不起作用的原因。

.mat-cancel-color {
  width: 160px;
  border: 1px solid #dddddd;
  color: #dddddd;
  background-color: white;
  border-radius: 25px;
}

.mat-cancel-color:hover {
  animation-name: glow;
  animation-duration: .4s;
}


.mat-cancel-color-trans {
  width: 160px;
  border: 1px solid #dddddd;
  color: #dddddd;
  background-color: white;
  border-radius: 25px;
  transition: all .4s ease;
  box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 0);
}


.mat-cancel-color-trans:hover {
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
}


/* Standard syntax */

@keyframes glow {
  0% {
    box-shadow: 0px 0px 15px 10px rgba(255, 255, 0, 1);
  }
  100% {
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 0, 1);
  }
}

<button class="mat-cancel-color">Button</button>

<button class="mat-cancel-color-trans">Button</button>