网页动态背景——随鼠标变换的动态线条

先上一张效果图。

代码如下:

<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>  
 1 /**
 2  * Copyright (c) 2016 hustcc
 3  * License: MIT
 4  * Version: v1.0.1
 5  * GitHub: https://github.com/hustcc/canvas-nest.js
 6 **/
 7 !
 8 function() {
 9     function n(n, e, t) {
10         return n.getAttribute(e) || t
11     }
12     function e(n) {
13         return document.getElementsByTagName(n)
14     }
15     function t() {
16         var t = e("script"),
17         o = t.length,
18         i = t[o - 1];
19         return {
20             l: o,
21             z: n(i, "zIndex", -1),
22             o: n(i, "opacity", .5),
23             c: n(i, "color", "0,0,0"),
24             n: n(i, "count", 99)
25         }
26     }
27     function o() {
28         a = m.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
29         c = m.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
30     }
31     function i() {
32         r.clearRect(0, 0, a, c);
33         var n, e, t, o, m, l;
34         s.forEach(function(i, x) {
35             for (i.x += i.xa, i.y += i.ya, i.xa *= i.x > a || i.x < 0 ? -1 : 1, i.ya *= i.y > c || i.y < 0 ? -1 : 1, r.fillRect(i.x - .5, i.y - .5, 1, 1), e = x + 1; e < u.length; e++) n = u[e],
36             null !== n.x && null !== n.y && (o = i.x - n.x, m = i.y - n.y, l = o * o + m * m, l < n.max && (n === y && l >= n.max / 2 && (i.x -= .03 * o, i.y -= .03 * m), t = (n.max - l) / n.max, r.beginPath(), r.lineWidth = t / 2, r.strokeStyle = "rgba(" + d.c + "," + (t + .2) + ")", r.moveTo(i.x, i.y), r.lineTo(n.x, n.y), r.stroke()))
37         }),
38         x(i)
39     }
40     var a, c, u, m = document.createElement("canvas"),
41     d = t(),
42     l = "c_n" + d.l,
43     r = m.getContext("2d"),
44     x = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
45     function(n) {
46         window.setTimeout(n, 1e3 / 45)
47     },
48     w = Math.random,
49     y = {
50         x: null,
51         y: null,
52         max: 2e4
53     };
54     m.id = l,
55     m.style.cssText = "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o,
56     e("body")[0].appendChild(m),
57     o(),
58     window.onresize = o,
59     window.onmousemove = function(n) {
60         n = n || window.event,
61         y.x = n.clientX,
62         y.y = n.clientY
63     },
64     window.onmouseout = function() {
65         y.x = null,
66         y.y = null
67     };
68     for (var s = [], f = 0; d.n > f; f++) {
69         var h = w() * a,
70         g = w() * c,
71         v = 2 * w() - 1,
72         p = 2 * w() - 1;
73         s.push({
74             x: h,
75             y: g,
76             xa: v,
77             ya: p,
78             max: 6e3
79         })
80     }
81     u = s.concat([y]),
82     setTimeout(function() {
83         i()
84     },
85     100)
86 } ();

第一是直接引入方式,第二可以直接拷贝到JS文件里面。

作者的GitHub地址是https://github.com/hustcc/canvas-nest.js

时间: 2024-11-07 16:23:34

网页动态背景——随鼠标变换的动态线条的相关文章

用Canvas为网页添加动态背景

最近刚刚接到为微信公众帐号"玩转三里屯"制作首页的任务.考虑到页面只在手机中浏览,而且手机对canvas的支持又非常好,所以打算使用canvas做点不一样的动画. 首先来看下效果图. 要实现这样的动画普通的CSS3是鞭长莫及了,只能使用Canvas.好在使用canvas也非常简单. Step1. 新建一个画布(<canvas>)元素,并放在在所有按钮和logo的下方以免遮挡前面的元素. <canvas id="canvas" style="

为网页添加动态背景 (背景轮播)

为网页添加动态背景 (背景轮播) 设置网页背景 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏背景</title> <script src="http://api.asilu.com/cdn/jquery.js,jquery.backstretch.min.js" type

jQuery背景跟随鼠标移动的网页导航

首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search 首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 滚动图片 广告特效 选项卡特效 鼠标特效 表单按钮 表格图层 窗口特效 文字特效 色彩特效 图像特效 日期特效 导航菜单 在线客服 当前位置:模板网首页 > 特效插件 > 导航菜单 >  jQuery背景跟随鼠标移正文 jQuery背景跟

css3 动态背景

动态背景 利用多层背景的交替淡入淡出,实现一种背景在不停变换的效果,先看图. 效果图: DEMO地址 步骤 1.利用css的radial-gradient创建一个镜像渐变的背景.其中的80% 20%为渐变中心的x,y位置. 具体的radial-gradient用法可以参见这里 .dynbg__bg{ position: absolute; top: 0px; left: 0px; width:100%; height:100%; background:-moz-radial-gradient(8

android 动态背景的实现以及SurfaceView中添加EditText控件

      首先还是一贯作风,我们先看案例: 静态图看不出来效果,如果用过此软件(扎客)的同学们都知道,她的背景会动.怎么样,是不是觉得很时尚,起码比静态的要好(个人观点).其实实现起来并 不复杂,这个如果让做游戏程序员做简直太小儿科了,这里我说明一点,其实我们做应用的也应该多少了解下游戏编程思维,起码对我们做应用有很好的帮助. 下面我简单介绍下实现方式. 实现原理:自定义一个SurfaceView控件.对之不停的onDraw,使得其背景动起来. 对于SurfaceView如果不了解的同学们麻烦

用duilib制作仿QQ2013动态背景登录器

转载请说明原出处,谢谢~~ 在上一篇博客里,我修复了CActiveXUI控件的bug,从而可以使用flash动画来制作程序的背景,这篇博客说明一下应该怎么使用CActiveXUI控件创建透明无窗体的背景. 去年的QQ2013的登陆界面就是动态界面,上篇博客我说道了,Duiengine已经有高人做好了仿QQ界面的代码,我这里只是把QQ2013的动态登陆界面制作出来.而QQ2014又换了全新的界面,不过熟悉UI制作的朋友知道,模仿 QQ2014的登陆界面比QQ2013的还要简单.可以看到QQ2013

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码.这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效. 实现的代码. html代码: <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>Welcome</h1> <form class="form"

设计模式之动态代理(Java的JDK动态代理实现)

对于JDK的动态代理,孔浩老师说学习的方法是把它记下来. 先写一个主题接口类,表示要完成的一个主题. package com.liwei.dynaproxy; /** * 要代理的主题接口 * @author Administrator * */ public interface Subject { public void miai(); } 再写一个实现类,这个实现类实现这个接口.当然,这个实现类就是我们要代理的对象. 为了区别不同的类的对象,我们为Person类增加了一个name属性,并且通

Objective-C多态:动态类型识别+动态绑定+动态加载

一.Objective-C多态 1.概念:相同接口,不同的实现 来自不同类可以定义共享相同名称的方法. 动态类型能使程序直到执行时才确定对象所属类型 动态类型绑定能使程序直到执行时才确定要对对象调用的实际方法 2.Objective-C不同于传统程序设计语言,它可以再运行时加入新的数据类型和新的程序模块:动态类型识别,动态绑定,动态加载 3.id类型:通用指针类型,弱类型,编译时不进行类型检查 二.动态类型识别 1.任意NSObject的子类都会继承NSObject的isa实例变量,而且当NSO