有没有办法淡化CSS“：主动”风格，或采用动画？

Question

:active一直非常有用，除了这个类在mouseUp的瞬间消失的事实，并且由于这种突然性，它似乎永远看起来不是更有趣的用途。

是否有某种方法，例如，使用animation或transition

添加不透明度下降的阴影

Answer 1

只需定义前后样式，就像通常用于任何其他类型的CSS过渡一样：

.but {
  box-shadow: 0 0 0 rgba(255, 0, 0, 0);
  transition: box-shadow 0.2s;
}

.but:active {
  box-shadow: 0 0 10px rgba(255, 0, 0, 1);
}

<button class="but">Click Me</button>