我试图使用for循环和rgb()值连续更改div标签的背景.
以下是我在sample.html中编写的代码：
以下是我在sample.html中编写的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script >
<script>
$(document).ready(function(){
var r=0;
var g=0;
var b=0;
for(r=0;r<255;r++)
{
for(g=0;g<255;g++)
{
for(b=0;b<255;b++)
{
$("#sqr").css("background-color","rgb(r,g,b)");
}
}
}
});
</script>
<style>
#sqr{background-color:rgb(255,0);
height:200px;
width:200px;
}
</style>
</head>
<body>
<div id="sqr">
</div>
</body>
</html>
所以enyone告诉我应该如何制作代码,以便div的背景颜色在页面加载时自动更改？
请注意,我想非常顺利地改变颜色.
根据一些建议,我已将代码更改为：
$("#sqr").css("background-color","rgb("+r+","+g+","+b+")");
解决方法
由于这个问题被标记为CSS,我想为此贡献一个纯CSS解决方案,只需使用CSS3 @keyframes,你可以简单地为你想要的元素添加颜色,可以使用％步进动画,你也可以使用动画-iteration-count并将其设置为无限.如果你想在有限的时间内迭代它,只需将无限变为你想要的任何值,但要确保它是一个整数.
.animate {
height: 200px;
width: 400px;
border: 1px solid #000;
-webkit-animation: animate_bg 5s;
animation: animate_bg 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@keyframes animate_bg {
0% {background:red;}
50% {background:green;}
100% {background:blue;}
}
@-webkit-keyframes animate_bg {
0% {background:red;}
50% {background:green;}
100% {background:blue;}
}
这是在CSS3规范中引入的,因此您可以参考this链接获取浏览器支持.
有许多polyfills适用于不支持CSS3 @keyframes的浏览器,所以如果你想要支持旧浏览器,你可能需要使用它,如果你不关心旧浏览器,你可以使用它而不是任何犹豫.
