开源超美css动态背景可直接引入html文件使用含注释、可更改

1.背景样式

本背景为动态蜘蛛网背景。
上图：

2.如何在html里面引用，作为html背景

2 在index.html内引用

<html><script src="change.js" type="text/javascript"></script>
<body>
</body>
</html>

直接引用就好了，所以很方便可以当做自己以后设计网页的专用包、背景那样。

3.js代码

注：此代码是在网上下载的，要看懂可能需要一点小功夫。所以我给js代码里面加了很多注释，方便大家修改background、一些样式、等等等等
上js代码：

window.onload=function(){//定义body的margin由默认值8px->0pxdocument.body.style.margin="0";document.body.style.background="#30333F";//创建canvas画布document.body.appendChild(document.createElement('canvas'));var canvas = document.querySelector('canvas'),ctx = canvas.getContext('2d') //ctx返回一个在canvas上画图的api/domcanvas.width = window.innerWidth;canvas.height = window.innerHeight;canvas.style.position='fixed';ctx.lineWidth = .3;ctx.strokeStyle = (new Color(150)).style;//定义鼠标覆盖范围var mousePosition = {x: 30 * canvas.width / 100,y: 30 * canvas.height / 100};var dots = {nb: 1000,//Dot的总数distance: 50,d_radius: 100,array: []};//创建颜色类，Color类返回字符串型rgba（*,*,*,.8）function mixComponents(comp1, weight1, comp2, weight2) {return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);}function averageColorStyles(dot1, dot2) {var color1 = dot1.color,color2 = dot2.color;var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));}function colorValue(min) {return Math.floor(Math.random() * 255 + min);}function createColorStyle(r,g,b) {return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';}function Color(min) {min = min || 0;this.r = colorValue(min);this.g = colorValue(min);this.b = colorValue(min);this.style = createColorStyle(this.r, this.g, this.b);}//创建Dot类以及一系列方法function Dot(){this.x = Math.random() * canvas.width;this.y = Math.random() * canvas.height;this.vx = -.5 + Math.random();this.vy = -.5 + Math.random();this.radius = Math.random() * 2;this.color = new Color();}Dot.prototype = {draw: function(){ctx.beginPath();ctx.fillStyle = this.color.style;ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);ctx.fill();}};function moveDots() {//Dot对象的移动for(i = 0; i < dots.nb; i++){var dot = dots.array[i];if(dot.y < 0 || dot.y > canvas.height){dot.vx = dot.vx;dot.vy = - dot.vy;}else if(dot.x < 0 || dot.x > canvas.width){dot.vx = - dot.vx;dot.vy = dot.vy;}dot.x += dot.vx;dot.y += dot.vy;}}function connectDots(){//DOt对象的连接for(i = 0; i < dots.nb; i++){for(j = i; j < dots.nb; j++){i_dot = dots.array[i];j_dot = dots.array[j];if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){ctx.beginPath();ctx.strokeStyle = averageColorStyles(i_dot, j_dot);ctx.moveTo(i_dot.x, i_dot.y);ctx.lineTo(j_dot.x, j_dot.y);ctx.stroke();//绘制定义的路线ctx.closePath();//创建从当前点回到起始点的路径}}}}}function createDots(){//创建nb个Dot对象for(i = 0; i < dots.nb; i++){dots.array.push(new Dot());}}function drawDots() {//引用Dot原型链，使用draw方法，在canvas上画出Dot对象for(i = 0; i < dots.nb; i++){var dot = dots.array[i];dot.draw();}}function animateDots() {ctx.clearRect(0, 0, canvas.width, canvas.height);//清除画布，否则线条会连在一起moveDots();connectDots();drawDots();requestAnimationFrame(animateDots);}createDots();//使用创建Dot类函数requestAnimationFrame(animateDots);//使用canvas独有的60Hz刷新屏幕画布的方法document.querySelector('canvas').addEventListener('mousemove',function(e){mousePosition.x = e.pageX;mousePosition.y = e.pageY;})document.querySelector('canvas').addEventListener('mouseleave',function(e){//鼠标离开时，连接自动返回到画布中心mousePosition.x = canvas.width / 2;mousePosition.y = canvas.height / 2;})}

需要资源可以点击下载：https://download.csdn.net/download/qq_43592352/12368572

2019.3.17
19：53

开源超美css动态背景可直接引入html文件使用含注释、可更改相关推荐

开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件
开源炫酷css轮播图可直接引入html文件使用含注释 jQuery插件 1.轮播图样式上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用文件的目录路径为: 需要轮播图插件的 ...
前端Vue中实现超炫酷动态背景(全屏背景+自定义banner+登录/注册页)
一.文章引导 #mermaid-svg-9sKRaMRBkdCcbAh2 {font-family:"trebuchet ms",verdana,arial,sans-serif; ...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本节案例如下(其他动效篇幅原因逐步讲解,欢迎三连): 一.线 ...
mfc , 超简单实现动态背景,
1, 在主对话框中, 添加一个类属性 nowOne, 标记循环的位图 2, 在初始化函数中, 添加一个线程, ThreadProc, 不添加直接设置一个定时器也行 //创建动态背景线程DWORD T ...
HTML + CSS实现动态背景的登录效果
一.动态背景的登录效果图由于背景是在不断的切换的,就不一一截图展示啦. 二.文件结构展示三.源码区 1.html文档(index.html) <!DOCTYPE html> <h ...
css 文字背景波浪，背景水波浪，动态波浪效果
css 文字背景波浪,背景水波浪,动态波浪效果 <!DOCTYPE html> <html lang="en"> <head><meta ...
利用CSS实现文字动态背景
利用CSS实现文字动态背景实现思路 1.我们要实现的是文字动态背景,那首先就应该想到在文字的基础上添加图片背景,然后利用文字范围进行裁剪,裁剪掉文字以外的背景,最后利用这个css3中的关键帧实现让图 ...
有趣的HTML实例（八）一个很有趣的动态背景（css+js）
小时候,谁都觉得自己的未来闪闪发光,不是吗?但是一旦长大,没有一件事会遂自己心愿. --<被嫌弃的松子的一生> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显 ...
利用CSS关键帧实现文字动态背景
在网页中我们时常会看到很多动效,这对我们还是很有吸引力的,今天我就看到一个文字动态背景的效果,思考了一下该怎么实现. 效果图如下: 一.实现思路 1.看见这种动画效果,首席想到的就是在文字下面添加一个 ...

开源超美css动态背景可直接引入html文件使用含注释、可更改

开源超美css动态背景可直接引入html文件使用含注释、可更改

1.背景样式

2.如何在html里面引用，作为html背景

3.js代码

开源超美css动态背景可直接引入html文件使用含注释、可更改相关推荐

最新文章

热门文章

开源超美css动态背景 可直接引入html文件使用 含注释、可更改

开源超美css动态背景 可直接引入html文件使用 含注释、可更改

1.背景样式

2.如何在html里面引用，作为html背景

3.js代码

开源超美css动态背景 可直接引入html文件使用 含注释、可更改相关推荐

最新文章

热门文章

开源超美css动态背景可直接引入html文件使用含注释、可更改

开源超美css动态背景可直接引入html文件使用含注释、可更改

开源超美css动态背景可直接引入html文件使用含注释、可更改相关推荐