利用linear-gradient不停的改变背景颜色，实现动态效果？？？？？？ - 编程论坛

#2

冰镇柠檬汁儿2016-03-14 22:42

setgrad1.style.background不能这么赋值

#3

linuxpluto2016-05-06 16:13

可是这效果，对比并修改吧。。

程序代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="margin:0;padding:0;">
<div id="grad1" style="color:white;text-align:center;height: 700px;"></div>

<script>
var i = -180, d = true;

function a() {
    var elm = document.getElementById("grad1");
    elm.style.background = "linear-gradient(" + i + "deg, red, blue)";
    elm.innerHTML=i+"deg";

    if (d) {i++;} else {i--;}
    if (i >= 180 || i <= -180) { d = !d; }
}

window.setInterval("a()", 5);
</script>
</body>
</html>

#4

linuxpluto2016-05-06 16:16

貌似你的代码就错了一个地方。。。循环变量加的时候引号用错了
另外360deg不知道有没有用或者报错不报错，我也没试。

另外即便没有任何错误你也看不到效果，因为速度太快了你只看到结果而已。。

#5

leeqihero2016-05-07 19:26

程序代码：

<html>
<head>
<meta charset="utf-8"/>
<style>
#grad2 {
height: 100px;
background: linear-gradient(90deg, red, blue); /* 标准的语法（必须放在最后） */
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法（必须放在最后） */
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(-90deg, red, blue); /* 标准的语法（必须放在最后） */
}
</style>
</head>
<body>
<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;height: 100px;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>
<p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
</body>
<script>
var i=0;
var setgrad1=document.getElementById("grad1");
window.onload=a();
function a(){
    setgrad1.style.background='linear-gradient('+i+'deg, red, blue)';
    i+=10;
    if(i<361) setTimeout("a()",500);
}
</script>
</html>