改變背景顏色CSS3

我有以下幾點：改變背景顏色CSS3

#box1 { 
    position: absolute; 
    width: 400px; 
    border: 1px solid black; 
    box-shadow: -3px 8px 34px #808080; 
    border-radius: 20px; 
    box-shadow: -8px 5px 5px #888888; 
    right: 100px; top: 50px; 
    height: 300px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6)); 
    -webkit-animation-name:myfirst; 
    -webkit-animation-duration:5s; 
    -webkit-animation-timing-function:linear; 
    -webkit-animation-iteration-count:infinite; 
    -webkit-animation-direction:alternate; 
    -webkit-animation-play-state:running; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {background:red;} 
to {background:yellow;} 
}

我的問題是：在這些線路

from {background:red;} 
    to {background:yellow;}

我怎樣才能更改起始顏色（紅色）這個（在下一行）將在後臺像這樣的顏色：

-webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6));

來源

2012-11-30 tsnave

可能重複：http://stackoverflow.com/questions/5654510/css3-animation-with-gradients –

一個梯度背景圖像，而不是背景顏色。你想如何在兩種不同的屬性之間進行轉換？ –

我的意思是說，這個「從（＃E0FFFF）到（＃ADD8E6）」將是開始顏色，黃色將在最後。我可以做嗎？ – tsnave

試試看看這個代碼。

注意：當您使用子格有可能...

<!DOCTYPE HTML> 
<html> 
<head> 
<title>What</title> 
<style type="text/css"> 
#box1 { 
    position: absolute; 
    width: 400px; 
    border: 1px solid black; 
    box-shadow: -3px 8px 34px #808080; 
    border-radius: 20px; 
    box-shadow: -8px 5px 5px #888888; 
    right: 100px; top: 50px; 
    height: 300px; 
    background: -webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6)); 
} 

#box1 > div 
{ 
    width: 100%; 
    height: 100%; 
    border-radius: 20px; 
    background-color: yellow; 
    opacity: 0; 
    -webkit-animation:myfirst 5s; 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
    from { opacity: 0; } 
    to { opacity: 1;} 
} 
</style> 
</head> 
<body> 

<div id="box1"><div></div></div> 

</body> 
</html>

來源

2012-11-30 16:11:30

謝謝，我不明白你在這裏做了什麼（你能解釋請求嗎？），並且這段代碼不適合我... – tsnave

什麼是您的瀏覽器？ – 2012-11-30 16:36:47

谷歌Chrom只有 – tsnave

改變背景顏色CSS3

回答

相關問題