实现一个动态的渐变色网页背景
一、HTML源码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
*{margin: 0px; padding: 0px;}
.z-div{
font-size: 30px;
color: #34495E;
font-family: "Source Sans Pro","Helvetica Neue","Arial,sans-serif";
text-align: center;
line-height: 500px;
background-size: 500%;
background-image: linear-gradient(125deg, #BFFEBE, #F6F8B5, #FCD0B3, #BFB6F8, #E8D8B3);
animation: bganimation 15s infinite;
}
@keyframes bganimation{
0%{background-position: 0% 50%;}
50%{background-position: 100% 50%;}
100%{background-position: 0% 50%;}
}
</style>
</head>
<body>
<div class="z-div" style="height: 100vh; overflow: auto;">
动态渐变色背景
</div>
<script>
function randomNum(minNum, maxNum) {
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
}
function randomBG() {
var c1 = randomNum(0, 255);
var c2 = randomNum(0, 255);
document.body.style.background = 'linear-gradient(to left bottom, hsl(' + c1 + ', 100%, 85%) 0%,hsl(' + c2 +
', 100%, 85%) 100%)';
}
randomBG();
</script>
</body>
</html>
二、实现效果