CSS过渡以实现盒子颜色

Question

是否有可能限制CSS的transition仅针对盒子阴影的颜色，而没有其他目标？

例如，您有一个带有盒子阴影的按钮。当您单击按钮时，它向下移动，框阴影缩小，使其看起来好像按钮已压缩。请参阅此示例。

但是 - 我也希望按钮能够更改颜色，我希望这种效果过渡。我可以这样做：

#button {
  transition: background-color 0.2s linear;
  transition: box-shadow 0.2s linear;
}

我的问题是，当按下按钮时，而不仅仅是颜色更改时，也会发生这种过渡。这意味着盒子阴影慢慢收缩，而按钮立即向下移动。请参阅此示例。我希望按钮的媒体和移动是瞬时的，并且不要过渡，因此 CSS的transition: box shadow属性只能影响Box Shadow的颜色？

如果不是，我还有其他方法可以尝试吗？也许和jQuery？谢谢。

Answer 1

是的，您只能为阴影颜色动画，尽管您需要一个小技巧，但使用伪元素::after是实际的绿色按钮，然后在按钮本身上设置阴影。p>这样，您将能够单独移动"按钮"，同时仅动画阴影。在下面的样本中，我选择将其动画为红色，因此很容易看到它起作用。

.button {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  transition: box-shadow 1s linear;
  background: transparent;
}
.button::after {
  content: attr(data-buttontext);
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  background-color: #4CAF50;
  border-radius: inherit;
}
.button:active {
  box-shadow: 0 9px #f00;
}
.button:active::after {
  background-color: #3e8e41;
  transform: translateY(4px);
}

<button class="button" data-buttontext="Example"></button>