实现一个动态的渐变色网页背景
一、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>
