我可以在CSS中使用@keyframes獲取數字嗎？

下面的CSS動畫從一種顏色漸變到另一種顏色，然後再回來。我可以在CSS中使用@keyframes獲取數字嗎？

@keyframes example { 
    0% {background-color:#cce0ff;} 
    25% {background-color:#66a3ff;} 
    50% {background-color:#cce0ff;} 
    75% {background-color:#66a3ff;} 
    100% {background-color:#cce0ff;} 
}

假設這是通過交叉衰落工作，有什麼辦法從過程中檢索數字？

例如：當處於動畫的25％階段時，我可以採用float .25並在另一個函數中使用它嗎？

我試圖讓我的頁面上的音樂的音量隨着顏色淡入和淡出而膨脹和下降。

來源

2017-03-17 Alex

不是我所知道的。你可以使用＃來通過'content'屬性填充內容，並且在頁面上顯示或者用javascript或其他東西來做任何你想做的事情。 http://codepen.io/anon/pen/LWOOQV –

雖然您不能'提取'CSS屬性，但您可以通過CSS variables的魔法實現您想要的相同結果！實質上，您可以設置一個變量，該變量將保存相同的值以用於兩個聲明中。

首先，您需要設置兩個變量聲明內使用：

:root { 
--one: 0%; 
--two: 25%; 
--three: 50%; 
--four: 75%; 
--five: 100%; 
}

然後簡單地引用這些變量在聲明要在使用它們的方式：

@keyframes example { 
    var(--one) {background-color:#cce0ff;} 
    var(--two) {background-color:#66a3ff;} 
    var(--three) {background-color:#cce0ff;} 
    var(--four) {background-color:#66a3ff;} 
    var(--five) {background-color:#cce0ff;} 
} 

[Another Declaration] { 
    volume: var(--two); 
}

這將在第二個聲明中將音量設置爲25％，同時在25％的關鍵幀處將背景色設置爲#66a3ff。

希望這會有所幫助！ :)

來源

2017-03-17 03:42:24

我可以在CSS中使用@keyframes獲取數字嗎？

回答

相關問題