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

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

代码片段 1

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

今天刚学了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前端开发实现背景平滑渐变效果》
» 本文链接地址:https://www.rokub.com/4873.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!