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

真想学C

等　级：新手上路
帖　子：31
专家分：0
注　册：2014-4-25
结帖率：40%

楼主

问题点数：0 回复次数：4

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

代码大致如下，循环的地方有问题，找不出来，各位大侠帮忙看看，谢谢了！对不起，没有分了。。。

程序代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <script>
        window.onload=function a(){          

        var setgrad1=document.getElementById("grad1");

        var i=0;
            for(i;i<=360;i++){
                setgrad1.style.background="linear-gradient('+i+'deg, red, blue)";
            }
        }
        var t=window.setTimeout("a()",500);
        window.clearTimeout(t);
    </script>
<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>
</html>

搜索更多相关主题的帖子: 动态　

2016-03-12 19:28

linuxpluto

等　级：贵宾
威　望：13
帖　子：889
专家分：23
注　册：2005-8-14

第 3 楼

得分:0

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

程序代码：

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

吃的比猪还差，干的比驴还累，起的比鸡还早，睡得比小姐还晚，挣得比民工还少，看起来比谁都好——苦命的人.人生短短几十年，不要给自己留下了什么遗憾，想笑就笑，想哭就哭，该爱的时候就去爱，无谓压抑自己

2016-05-06 16:13

leeqihero

等　级：论坛游侠
威　望：7
帖　子：122
专家分：135
注　册：2016-3-24

第 5 楼

得分:0

程序代码：

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

2016-05-07 19:26