CSS過渡以實現JUST框陰影顏色

Question

是否有可能將CSS的transition限制為僅針對盒子陰影的顏色，而沒有其他選擇？

例如，您有一個帶有框陰影的按鈕。 當您單擊按鈕時，按鈕將向下移動，並且框陰影會縮小，以使其看起來好像按鈕已被壓縮。 請參閱此示例 。

但是-我也希望按鈕能夠改變顏色，並且我希望這種效果可以過渡。 我可以用這樣的東西做到這一點：

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

我的問題是按下按鈕時也會發生這種過渡，而不僅僅是顏色改變時。 這意味着方框陰影會慢慢縮小，而按鈕會立即向下移動。 請參閱此示例 。 我希望按鈕的按下和移動是瞬時的，而不是過渡的，所以CSS的transition: box shadow是否可能transition: box shadow屬性僅影響box shadow的顏色？

如果沒有，我還有其他方法可以嘗試嗎？ 也許用jQuery？ 謝謝。

Answer 1

是的，您可以只設置陰影顏色的動畫，盡管您需要一些技巧，但可以使用偽元素::after作為實際的綠色按鈕之后，然后在按鈕本身上設置陰影。

這樣，您將能夠單獨移動“按鈕”，並且同時僅對陰影進行動畫處理。 在下面的示例中，我選擇將其設置為紅色動畫，以使其易於工作。

 .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>