CSS轉換背景色

我的頁面有三種背景顏色，根據div的顯示內容（實際上只是一個字）而改變。CSS轉換背景色

顏色現在確實改變了，但過渡並不像預期的那樣平滑。顏色只是變化殘酷，沒有轉換操作。

這裏是我的CSS：

.gradient-low{ 
background: #ddd6f3; 
background: -webkit-linear-gradient(to left, #faaca8 , #ddd6f3); 
background: linear-gradient(to left, #faaca8 , #ddd6f3); 
transition-duration: 0.4s; 
} 

.gradient-moderate{ 
background: #ff6e7f; 
background: -webkit-linear-gradient(to left, #ff6e7f , #bfe9ff); 
background: linear-gradient(to left, #ff6e7f , #bfe9ff); 
transition-duration: 0.4s; 
} 

.gradient-high{ 

background: #EECDA3; 
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3); 
background: linear-gradient(to left, #EF629F , #EECDA3); 
transition-duration: 0.4s; 
}

你有這樣的顏色的變化是逐漸平滑地操作有什麼建議？

來源

2017-02-28 mattvent

請發表你的HTML，一個完整的工作示例。 –

如果我沒有記錯，background-image不是一個動畫屬性。如果是我，並且漸變是必要的，我會使用多個疊加層並根據需要淡入淡出，儘管這可能會嚴重影響性能。 – chrism

不幸的是，你目前不能轉換CSS漸變。但是，您可以解決此問題，以達到類似的效果。

下面的CSS將漸變移動到::before僞類。由於這些漸變現在從透明到次要顏色，所以類本身的純色背景過渡在背景中可見。

.gradient-low { 
    background: #ddd6f3; 
    transition: background 0.4s; 
} 

.gradient-low::before { 
    height: 100%; 
    width: 100%; 
    content: ''; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    background: linear-gradient(to left, #faaca8 , rgba(0,0,0,0)); 
}

完全小提琴這裏： https://jsfiddle.net/mstringfellow/zftzrobv/

來源

2017-02-28 11:48:12

有趣。我已經將轉換時間更改爲1秒，這很不錯。感謝提示！ – mattvent

使用過渡是不可能的，但我們可以用CSS動畫和關鍵幀動畫。試試這個：

.gradient-high{ 

background: #EECDA3; 
background: -webkit-linear-gradient(to left, #EF629F , #EECDA3); 
background: linear-gradient(to left, #EF629F , #EECDA3); 
animation-name: drop; 
    animation-iteration-count: 1; 
    animation-timing-function: ease-out; 
    animation-duration: 5s; 
} 

@keyframes drop { 
    0% { 
    transform: translateY(-100%); 
    } 
    100% { 
    transform: translateY(50); 
    } 
}

請過檢查出FIDDLE

來源

2017-02-28 12:00:39

似乎是另一種可能的解決方案。儘管如此，它看起來似乎有點強硬，但我會嘗試。謝謝。 – mattvent

CSS轉換背景色

回答

相關問題