JS前端开发实现背景平滑渐变效果

前端开发应用实例|前端后端如何并行开发|前端融资多少开发贷多少

代码片段 1

<!DOCTYPE html>

<html>

<head>

<title>前端开发效果实例：js背景颜色随机渐变</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>

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>

</html>

今天刚学了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也可以取不同的数值来获得冷色系或暖色系~

前端安卓开发环境搭建|腾讯的前端开发一个月有多少钱|前端开发工作内容描述

JS前端开发实现背景平滑渐变效果

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发