[英]change the background color in CSS3
I have the following : 我有以下内容:
#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;}
}
My question is: in those lines 我的问题是:
from {background:red;}
to {background:yellow;}
how can I change the start color (red) to this (in the next line) will be like this color in the background: 我怎样才能更改起始颜色(红色)这个(下一行)会喜欢这个颜色的背景:
-webkit-gradient(linear, left top, left bottom, from(#E0FFFF), to(#ADD8E6));
Try this code. 试试这个代码。
Note : it's possible when you use 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.