CSS過渡效果JUST box-shadow color

-1

是否可以將CSS'transition限制爲僅限於box-shadow的顏色，而沒有其他內容？CSS過渡效果JUST box-shadow color

例如，您有一個帶有陰影的按鈕。當你點擊按鈕時，它會向下移動，並且盒子的陰影會縮小，看起來就好像按鈕已經壓縮一樣。 See this example。

但我也希望按鈕能夠改變顏色，我希望這個效果可以被轉換。我可以這樣做這樣的事情是這樣的：

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

我的問題是這個過渡也發生在按下按鈕時，而不是隻是當顏色改變時。這意味着盒子的陰影會慢慢縮小，而按鈕會立即向下移動。 See this example。我希望按鈕的按下和移動是瞬時的，而不是過渡，所以是否可以爲CSS的transition: box shadow屬性僅影響框陰影的顏色？

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

來源

2017-05-02 Caspar B

你能提供你的榜樣？目前還不清楚你試圖達到什麼樣的目標 – Tymek

我讀過兩遍，但仍不明白。不是很清楚。 – dfsq

查看我已鏈接的兩個示例。第一個是我的按鈕，第二個是「transition：box-shadow」導致陰影在點擊時緩慢向下移動的示例，而不是與按鈕的其餘部分即刻一起。 'transition：box-shadow'是必要的，因爲我希望按鈕在顏色之間轉換以獲得平滑的外觀。 @dfsq –

是的，你可以只動畫陰影顏色，但你需要一個小技巧，使用僞元素::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>

來源

2017-05-02 11:07:42 LGSon

CSS過渡效果JUST box-shadow color

回答

相關問題