Question

我有以下内容：

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

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

更改CSS3中的背景颜色

1 个答案: