[JS入门][新人]背景平滑渐变效果

原创 CookieClicker 随笔 待整理 2196阅读 2014-08-22 21:06:12 举报

[code]<!DOCTYPE html>
<html>
<head>
<title>背景颜色随机渐变</title>
<style>
body {
-webkit-transition: all 2000ms ease-in-out 0s;
-moz-transition: all 2000ms ease-in-out 0s;
-ms-transition: all 2000ms ease-in-out 0s;
-o-transition: all 2000ms ease-in-out 0s;
transition: all 2000ms ease-in-out 0s;
}
</style>
<script type="text/javascript">
function random(min,range) {
return Math.floor(Math.random() * range+min);
}
function background() {
var a = random(0,255);
var b = random(0,255);
var c = random(0,255);
document.body.style.background = 'rgb('+a+','+b+','+c+')';
setTimeout('background()', 2000);
}
</script>
</head>
<body onload="background()">

</body>
</html>[/code]

代码片段 1

今天刚学了setTimeout,终于能这种背景颜色轮换的效果啦~~不过觉得由于太普遍,应该很多人都做过吧.........{:1_499:}

主要用到的css3里的transition属性,用于制造过渡效果,还有就是JS里的setTimeout和回调函数。

主函数里有两个参数,一个是min,代表rgb的每个值随机到的最小值,另一个是range,代表每个值随即范围。
在例子中我取min=0,range=255,背景颜色能随机到任意一种颜色。但是,实际操作时觉得由于颜色的不确定性,有时候随即到的颜色不好看,或者前后两种颜色不搭。这样就可以通过调节min和range来控制颜色随机到的范围了。

rgb(0,0,0)是代表黑色,则在range值较小的情况下,降低min值可获得一系列较深的颜色。同理min较高的情况下可获得淡色。
上面的a,b,c也可以取不同的数值来获得冷色系或暖色系~

最后附上一张rgb对照图~~

[JS入门][新人]背景平滑渐变效果

评论 ( 3 )
最新评论
士力架 2016-03-18 13:47:27 3F

这哪是新手,这是大神啊

xuqiuyu 2016-02-01 09:32:57 2F

nice

fly_leo 2014-08-29 17:21:16 1F

帅气,给劲!