实现一个动态的渐变色网页背景

一、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>

二、实现效果

动态的渐变色网页背景相关推荐

想要好看的设计？收下这份网页背景设计指南吧！
网页背景设计看似在整个网站的设计中处于一个不起眼的位置.实则,它对于用户的留存性及促进网站转化率方面都起到非常重要的作用.若是网页背景设计不合理,或者图片.色彩运用不当,对于用户而言都是视觉上的灾难. ...
百度SEO网页背景渐变色代码
很漂亮网页背景渐变色代码,背景颜色不断变换,用来做网站背景还是挺不错的下载地址: http://www.bytepan.com/77DYghsNOdA
以canvas为动态网页背景，添加的标签内容不显示（附源码-----动态背景星空）
问题描述: 我在网上下载了一个动态网页背景--星空,然后本地能运行,但是当我添加其他组件的时候,发现组件不显示,然后只能显示动态背景.仔细看了一下代码,发现这个动态背景是依靠canvas标签来实现的. ...
使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的background-image属性只能使用图片.SVG.颜色或渐变色.但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在 ...
将视频作为网站背景html,将视频作为网页背景
一些门户网站采用视频作为网页背景,具有很好的展示效果,而随着HTML5技术的发展和浏览器支持程序的提升,采用视频作为网页背景也变得越来越容易. 技术分析 CSS里的background-image属性 ...
html背景视频如何自动播放,使用视频作为网页背景的技术探讨
使用视频作为网页背景是件很酷的事情,但也是件困难的事情.CSS里的background-image属性只能使用图片.SVG.颜色或渐变色.但从技术讲,我们是可以伪造出一种效果,让视频以背景的角色出现在 ...
Vue改变网页背景颜色切换
今天给大家分享一个好看的网页背景颜色切换的html文件功能支持: 1.点击默认主题内容区域切换对应颜色,包括文字背景和文字颜色 2.在动态颜色中可以选择自己喜欢的颜色动态切换实现代码: <! ...
python做花瓣飘落的背景_jquery+css3实现网页背景花瓣随机飘落特效
飘花效果的实现--效果图: 需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jquery对一些效果的扩展飘花的效果稍微复杂一点,有一定量的JavaScr ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...

动态的渐变色网页背景

实现一个动态的渐变色网页背景

一、HTML源码

二、实现效果

动态的渐变色网页背景相关推荐

最新文章

热门文章