css - 有什么方法可以淡化 CSS ":active"样式，或者使用动画吗？

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>