更改 CSS3 中的背景颜色答案

【问题标题】：change the background color in CSS3更改 CSS3 中的背景颜色
【发布时间】：2012-11-18 20:42:15
【问题描述】：

我有以下：

#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));

【问题讨论】：

可能重复：stackoverflow.com/questions/5654510/…
渐变是背景图像，而不是背景颜色。您想如何在两种不同类型的属性之间进行转换？
我的意思是这个“from(#E0FFFF),to(#ADD8E6)”将是开始颜色，黄色将是结束。我可以吗？
你的意思是停止循环。即以黄色结束动画。
是的，而且start颜色会不止一种这样的颜色----from(#E0FFFF),to(#ADD8E6));---- -

标签： css html colors colorbox

【解决方案1】：

试试这个代码。

注意：当你使用 sub div 时有可能...

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

【讨论】：

谢谢，我不明白你在这里做了什么（你能解释一下吗？）这个代码对我不起作用......