一些js及css样式

人体时钟：

源码：

<div>
<embed wmode="transparent" src="https://files.cnblogs.com/files/kavs/honehone_clock_tr.swf" quality="high" bgcolor="#ffffff" name="honehoneclock" allowscriptaccess="always" type="application/x-shockwave-flash" width="160" height="70" align="middle">
</div>

旋转魔方：

源码：

<style>
        /*最外层容器样式*/
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px;
            position: relative;
            z-index:9999;/*置于最上层*/
        }
 
        /*包裹所有容器样式*/
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(-30deg) rotateY(-80deg);
            animation: rotate linear 20s infinite;
        }
 
        @-webkit-keyframes rotate {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
 
        .cube div {
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            transition: all .4s;
        }
 
        /*定义所有图片样式*/
        .pic {
            width: 200px;
            height: 200px;
        }
 
        .cube .out_front {
            transform: rotateY(0deg) translateZ(100px);
        }
 
        .cube .out_back {
            transform: translateZ(-100px) rotateY(180deg);
        }
 
        .cube .out_left {
            transform: rotateY(-90deg) translateZ(100px);
        }
 
        .cube .out_right {
            transform: rotateY(90deg) translateZ(100px);
        }
 
        .cube .out_top {
            transform: rotateX(90deg) translateZ(100px);
        }
 
        .cube .out_bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }
 
        /*定义小正方体样式*/
        .cube span {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
 
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
 
        .cube .in_front {
            transform: rotateY(0deg) translateZ(50px);
        }
 
        .cube .in_back {
            transform: translateZ(-50px) rotateY(180deg);
        }
 
        .cube .in_left {
            transform: rotateY(-90deg) translateZ(50px);
        }
 
        .cube .in_right {
            transform: rotateY(90deg) translateZ(50px);
        }
 
        .cube .in_top {
            transform: rotateX(90deg) translateZ(50px);
        }
 
        .cube .in_bottom {
            transform: rotateX(-90deg) translateZ(50px);
        }
 
        /*鼠标移入后样式*/
        .cube:hover .out_front {
            transform: rotateY(0deg) translateZ(200px);
        }
 
        .cube:hover .out_back {
            transform: translateZ(-200px) rotateY(180deg);
        }
 
        .cube:hover .out_left {
            transform: rotateY(-90deg) translateZ(200px);
        }
 
        .cube:hover .out_right {
            transform: rotateY(90deg) translateZ(200px);
        }
 
        .cube:hover .out_top {
            transform: rotateX(90deg) translateZ(200px);
        }
 
        .cube:hover .out_bottom {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>

<div class="wrap">
        <!--包裹所有元素的容器-->
        <div class="cube">
            <!--前面图片 -->
            <div class="out_front">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_c5.jpg" class="pic">
            </div>
            <!--后面图片 -->
            <div class="out_back">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_0.jpg" class="pic">
            </div>
            <!--左面图片 -->
            <div class="out_left">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_3.jpg" class="pic">
            </div>
            <!--右面图片 -->
            <div class="out_right">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_11.jpg" class="pic">
            </div>
            <!--上面图片 -->
            <div class="out_top">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_4.jpg" class="pic">
            </div>
            <!--下面图片 -->
            <div class="out_bottom">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1266753/t_s6.jpg" class="pic">
            </div>
 
            <!--小正方体 -->
            <span class="in_front">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_01.jpg" class="in_pic">
            </span>
            <span class="in_back">
                 <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_02.jpg" class="in_pic">
            </span>
            <span class="in_left">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_03.jpg" class="in_pic">
            </span>
            <span class="in_right">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_04.jpg" class="in_pic">
            </span>
            <span class="in_top">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_05.jpg" class="in_pic">
            </span>
            <span class="in_bottom">
                <img src="https://images.cnblogs.com/cnblogs_com/lzw123-/1273451/t_06.jpg" class="in_pic">
            </span>
        </div>
 
    </div>

粒子效果：

源码：

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>粒子效果演示 </title>
 
 

<style type="text/css">
 
html, body {
<!--
text-align: center;
-->
margin:0;
padding:0;
background: #FFDAB9;
<!--
    color: #666666;
-->
line-height: 1.25em;
}

<!--
canvas {
position: absolute;
left: 0px;
top: 0px;
border: 1px solid #00F5FF;
user-select: none;  
}
 -->
canvas {

border: 1px solid #00F5FF;
user-select: none;  
}
 
 <!--
        #outer {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1px;
        height: 1px;
        overflow: visible;
        }
 -->
 <!--
         #canvasContainer {
        position: absolute;
        width: 1000px;
        height: 1000px;
        top: -280px;
        left: -500px;
        }
 -->

<!--
        a {
        color: #00CBCB;
        text-decoration:none;
        font-weight:bold;
        }
        a:hover {
        color:#FFFFFF;
}
-->
<!--
        #output {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.75em;
        margin-top:4px;
        }

--> 
<!--
    #footer{
    font-size: 0.6em;
    font-family: Arial, Helvetica, sans-serif;
    position: absolute;
    bottombottom:8px;
    width:98%;
    }

-->
 

 
</style>
</head>
<body>

<!--

    <div id="outer">
    <div id="canvasContainer">

-->

<!--
    <canvas id="mainCanvas" width="1000" height="1000"></canvas>
-->
<canvas id="mainCanvas" width=1000px height=2000px ></canvas>

<!--

    <div id="output"></div>
    </div>
    </div>

-->

 
<script type="text/javascript">
 
//javascript部分
 
(function(){
var PI_2 = Math.PI * 2;

//网页可见区域宽：document.body.offsetWidth (包括边线的宽)
//网页可见区域高：document.body.offsetHeight (包括边线的宽)
//网页正文全文宽：document.body.scrollWidth
//网页正文全文高：document.body.scrollHeight 

var canvasW = 1000;
var canvasH = 2000;

var numMovers = 600;
var friction = 0.96;
var movers = [];
var canvas;
var ctx;
var canvasDiv;
var outerDiv;
var mouseX;
var mouseY;
var mouseVX;
var mouseVY;
var prevMouseX;
var prevMouseY;
var isMouseDown;
 
function init(){

canvas = document.getElementById("mainCanvas");

// canvas.width="1000";//注意：没有单位
 //canvas.height="1000";//注意：没有单位
 
 //canvasW = canvas.offsetLight-canvas.offsetLeft;
// canvasH = canvas.offsetBottom-canvas.offsetTop;
if ( canvas.getContext ){
setup();
setInterval( run , 20);//设置定时执行
//trace('你们好');
}
else{
//trace("Sorry, needs a recent version of Chrome, Firefox, Opera, Safari, or Internet Explorer 9.");
}
}
 
function setup(){
//outerDiv = document.getElementById("outer");
//canvasDiv = document.getElementById("canvasContainer");
ctx = canvas.getContext("2d");
var i = numMovers;
while ( i-- ){
var m = new Mover();
m.x = canvasW * 0.5;
m.y = canvasH * 0.5;
m.vX = Math.cos(i) * Math.random() * 34;
m.vY = Math.sin(i) * Math.random() * 34;
movers[i] = m;
}
 
mouseX = prevMouseX = canvasW * 0.5;
mouseY = prevMouseY = canvasH * 0.5;
 
document.onmousedown = onDocMouseDown;
document.onmouseup = onDocMouseUp;
document.onmousemove = onDocMouseMove;


if(document.addEventListener){ 
document.addEventListener('DOMMouseScroll',onDocMouseMove,false); 
}
window.onmousewheel=document.onmousewheel=onDocMouseMove;

//document.onmousewheel = onDocMouseMove;
//document.addEventListener('DOMMouseScroll',onDocMouseMove,false); 
}
 
function run(){
//ctx.globalCompositeOperation = "source-over";//新画在原画之上
ctx.globalCompositeOperation = "destination-in";//原画变为透明，显示在原画范围内的目标图画
ctx.fillStyle = "rgba(8,8,12,0.3)";
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.fillRect( 0 , 0 , canvasW , canvasH );
ctx.globalCompositeOperation = "lighter";
 
mouseVX = mouseX - prevMouseX;
mouseVY = mouseY - prevMouseY;
prevMouseX = mouseX;
prevMouseY = mouseY;
 
var toDist = canvasW * 0.86;
var stirDist = canvasW * 0.125;
var blowDist = canvasW * 0.5;
var Mrnd = Math.random;
var Mabs = Math.abs;
var i = numMovers;
while ( i-- ){
var m = movers[i];
var x = m.x;
var y = m.y;
var vX = m.vX;
var vY = m.vY;
 
var dX = x - mouseX;
var dY = y - mouseY;
var d = Math.sqrt( dX * dX + dY * dY ) || 0.001;
dX /= d;
dY /= d;
 
if ( isMouseDown ){
if ( d < blowDist ){
var blowAcc = ( 1 - ( d / blowDist ) ) * 14;
vX += dX * blowAcc + 0.5 - Mrnd();
vY += dY * blowAcc + 0.5 - Mrnd();
}
}
 
if ( d < toDist ){
var toAcc = ( 1 - ( d / toDist ) ) * canvasW * 0.0014;
vX -= dX * toAcc;
vY -= dY * toAcc;
}
 
if ( d < stirDist ){
var mAcc = ( 1 - ( d / stirDist ) ) * canvasW * 0.00026;
vX += mouseVX * mAcc;
vY += mouseVY * mAcc;
}
 
vX *= friction;
vY *= friction;
 
var avgVX = Mabs( vX );
var avgVY = Mabs( vY );
var avgV = ( avgVX + avgVY ) * 0.5;
 
if( avgVX < .1 ) vX *= Mrnd() * 3;
if( avgVY < .1 ) vY *= Mrnd() * 3;
 
var sc = avgV * 0.45;
sc = Math.max( Math.min( sc , 3.5 ) , 0.4 );
 
var nextX = x + vX;
var nextY = y + vY;
 
if ( nextX > canvasW ){
nextX = canvasW;
vX *= -1;
}
else if ( nextX < 0 ){
nextX = 0;
vX *= -1;
}
 
if ( nextY > canvasH ){
nextY = canvasH;
vY *= -1;
}
else if ( nextY < 0 ){
nextY = 0;
vY *= -1;
}
 
m.vX = vX;
m.vY = vY;
m.x = nextX;
m.y = nextY;
 
ctx.fillStyle = m.color;
ctx.beginPath();
ctx.arc( nextX , nextY , sc , 0 , PI_2 , true );//画弧  x y r  起始角 终止角 填充
ctx.closePath();
ctx.fill();
}
}
 
 
function onDocMouseMove( e ){
var ev = e ? e : window.event;
//mouseX = ev.clientX - outerDiv.offsetLeft - canvasDiv.offsetLeft;
//mouseY = ev.clientY - outerDiv.offsetTop - canvasDiv.offsetTop;

// 滚动条
var scrollTop;
var scrollLeft;
var scrollWidth;
var scrollHeight;
   if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
        scrollLeft = document.documentElement.scrollLeft;
        scrollWidth = document.documentElement.scrollWidth;
        scrollHeight = document.documentElement.scrollHeight;
    } else if (document.body) {
        scrollTop = document.body.scrollTop;
        scrollLeft = document.body.scrollLeft;
        scrollWidth = document.body.scrollWidth;
        scrollHeight = document.body.scrollHeight;
    }

mouseX = ev.clientX+scrollLeft-canvas.offsetLeft;
mouseY = ev.clientY+scrollTop-canvas.offsetTop;


//mouseX = ev.clientX-canvas.offsetLeft;

//mouseY = ev.clientY-canvas.offsetTop;
}
 
function onDocMouseDown( e ){
isMouseDown = true;
return false;
}
 
function onDocMouseUp( e ){
isMouseDown = false;
return false;
}
 
 
function Mover(){
// *128 ，去除浅色
this.color = "rgb(" + Math.floor( Math.random()*128 ) + "," + Math.floor( Math.random()*128 ) + "," + Math.floor( Math.random()*128 ) + ")";
this.y = 0;
this.x = 0;
this.vX = 0;
this.vY = 0;
this.size = 1;
}
 
 
function rect( context , x , y , w , h ){
context.beginPath();
context.rect( x , y , w , h );
context.closePath();
context.fill();
}

/*--
    function trace( str ){
    document.getElementById("output").innerHTML = str;
    }
*/
 
window.onload = init;
})();
 
</script> 
 
</body>
</html>

 

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>粒子鼠标跟随</title>

<style>
html, body {
    overflow: hidden;
    background: black;
}</style>
<style>html, * {-webkit-user-select:text!important; -moz-user-select:text!important;}</style></head>
<body>


<script>
var PI = Math.PI,cos = Math.cos,acos = Math.acos,sin = Math.sin,asin = Math.asin,abs = Math.abs,sqrt = Math.sqrt,pow = Math.pow,floor = Math.floor,round = Math.round,random = Math.random,atan2 = Math.atan2;
var HALF_PI = 0.5 * PI;
var TAU = 2 * PI;
var QT3_TAU = TAU - HALF_PI;
var TO_RAD = PI / 180;
var rand = function rand(n) {return n * random();};
var randRange = function randRange(n) {return n - rand(2 * n);};
var fadeIn = function fadeIn(t, m) {return t / m;};
var fadeOut = function fadeOut(t, m) {return (m - t) / m;};
var fadeInOut = function fadeInOut(t, m) {
    var hm = 0.5 * m;
    return abs((t + hm) % m - hm) / hm;
};
var dist = function dist(x1, y1, x2, y2) {return sqrt(pow(x2 - x1, 2) + pow(y2 - y1, 2));};
var angle = function angle(x1, y1, x2, y2) {return atan2(y2 - y1, x2 - x1);};
var lerp = function lerp(n1, n2, speed) {return (1 - speed) * n1 + speed * n2;};

var deflectorCount = 50;
var particleCount = 500;

var canvas = void 0;
var ctx = void 0;
var origin = void 0;
var mouse = void 0;
var hover = void 0;
var deflectors = void 0;
var particles = void 0;

function setup() {
    canvas = document.createElement('canvas');
    ctx = canvas.getContext('2d');
    canvas.style = '
		position: absolute;
		top: 0;
		left: 0;
		 100%;
		height: 100%;
	';






    document.body.appendChild(canvas);
    origin = {
        x: 0,
        y: 0 };

    mouse = {
        x: 0,
        y: 0 };

    hover = false;
    init();
    draw();
}

function init() {
    resize();
    hover = false;

    deflectors = [];
    for (var i = 0; i < deflectorCount; i++) {
        deflectors.push(getDeflector());
    }

    particles = [];
    for (var _i = 0; _i < particleCount; _i++) {
        particles.push(getParticle(_i).create());
    }
}

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    origin.x = mouse.x = 0.5 * canvas.width;
    origin.y = mouse.y = 0.5 * canvas.height;
}

function mouseHandler(e) {
    hover = e.type === "mousemove";
    mouse.x = e.clientX;
    mouse.y = e.clientY;
}

function getDeflector() {
    return {
        position: {
            x: rand(window.innerWidth),
            y: rand(window.innerHeight) },

        velocity: {
            x: randRange(1),
            y: randRange(1) },

        threshold: rand(200) + 100,
        direction: rand(TAU),
        move: function move() {
            if (this.position.x > canvas.width || this.position.x < 0) {
                this.velocity.x *= -1;
            }
            if (this.position.y > canvas.height || this.position.y < 0) {
                this.velocity.y *= -1;
            }
            this.position.x += this.velocity.x;
            this.position.y += this.velocity.y;
        } };

}

function getParticle(i) {
    return {
        create: function create() {
            this.position.x = this.lastPosition.x = origin.x + randRange(1);
            this.position.y = this.lastPosition.x = origin.y + randRange(1);
            this.speed = rand(5) + 1;
            this.size = rand(3) + 0.5;
            this.life = 0;
            this.ttl = rand(100);
            this.hue = randRange(30);
            this.direction = angle(0.5 * canvas.width, 0.5 * canvas.height, this.position.x, this.position.y);
            return this;
        },
        position: {
            x: 0,
            y: 0 },

        lastPosition: {
            x: 0,
            y: 0 },

        velocity: {
            x: 0,
            y: 0 },

        update: function update() {
            this.life++;
            this.lastPosition.x = this.position.x;
            this.lastPosition.y = this.position.y;
            this.velocity.x = lerp(
            this.velocity.x,
            cos(this.direction) * fadeInOut(this.life, this.ttl) * this.speed,
            0.15);

            this.velocity.y = lerp(
            this.velocity.y,
            sin(this.direction) * fadeInOut(this.life, this.ttl) * this.speed,
            0.15);

            this.position.x += this.velocity.x;
            this.position.y += this.velocity.y;
            this.life > this.ttl && this.create();
        },
        draw: function draw() {
            this.update();
            ctx.beginPath();
            ctx.lineWidth = this.size;
            ctx.strokeStyle = 'hsla(' + this.hue + ',60%,50%,' + fadeInOut(this.life, this.ttl) * 0.5 + ')';
            ctx.moveTo(this.lastPosition.x, this.lastPosition.y);
            ctx.lineTo(this.position.x, this.position.y);
            ctx.stroke();
            ctx.closePath();
        } };

}

var deflector = void 0,particle = void 0;

function draw() {
    var i = void 0,j = void 0;
    origin.x =
    lerp(
    origin.x,
    hover ? mouse.x : 0.5 * canvas.width,
    0.05);

    origin.y =
    lerp(
    origin.y,
    hover ? mouse.y : 0.5 * canvas.height,
    0.05);

    ctx.fillStyle = "rgba(0,0,0,0.05)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    for (i = particles.length - 1; i >= 0; i--) {
        particle = particles[i];
        for (j = deflectors.length - 1; j >= 0; j--) {
            deflector = deflectors[j];

            i === 0 && deflector.move();

            particle.direction =
            dist(
            particle.position.x,
            particle.position.y,
            deflector.position.x,
            deflector.position.y) <
            deflector.threshold &&
            lerp(
            particle.direction,
            angle(
            deflector.position.x,
            deflector.position.y,
            particle.position.x,
            particle.position.y) +
            angle(
            origin.x,
            origin.y,
            particle.position.x,
            particle.position.y),

            0.075) ||

            particle.direction;
        }

        particle.draw();
    }

    ctx.save();
    ctx.globalCompositeOperation = "lighten";
    ctx.filter = "blur(6px)";
    ctx.drawImage(canvas, 0, 0);
    ctx.restore();

    ctx.save();
    ctx.drawImage(canvas, 0, 0);
    ctx.restore();

    window.requestAnimationFrame(draw);
}

window.addEventListener("load", setup);
window.addEventListener("resize", resize);
window.addEventListener("mousemove", mouseHandler);
window.addEventListener("mouseout", mouseHandler);
window.addEventListener("click", init);</script>



<canvas style="position: absolute; top: 0px; left: 0px;  100%; height: 100%;" width="1920" height="360"></canvas></body></html>

线条粘连效果：

源码：

<script>
! function() {
        //封装方法，压缩之后减少文件大小
        function get_attribute(node, attr, default_value) {
            return node.getAttribute(attr) || default_value;
        }
        //封装方法，压缩之后减少文件大小
        function get_by_tagname(name) {
            return document.getElementsByTagName(name);
        }
        //获取配置参数
        function get_config_option() {
            var scripts = get_by_tagname("script"),
                script_len = scripts.length,
                script = scripts[script_len - 1]; //当前加载的script
            return {
                l: script_len, //长度，用于生成id用
                z: get_attribute(script, "zIndex", -1), //z-index
                o: get_attribute(script, "opacity", 0.5), //opacity
                c: get_attribute(script, "color", "0,0,0"), //color
                n: get_attribute(script, "count", 99) //count
            };
        }
        //设置canvas的高宽
        function set_canvas_size() {
            canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, 
            canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        }
        //绘制过程
        function draw_canvas() {
            context.clearRect(0, 0, canvas_width, canvas_height);
            //随机的线条和当前位置联合数组
            var all_array = [current_point].concat(random_lines);
            var e, i, d, x_dist, y_dist, dist; //临时节点
            //遍历处理每一个点
            random_lines.forEach(function(r) {
                r.x += r.xa, 
                r.y += r.ya, //移动
                r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1, 
                r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
                context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
                for (i = 0; i < all_array.length; i++) {
                    e = all_array[i];
                    //不是当前点
                    if (r !== e && null !== e.x && null !== e.y) {
                            x_dist = r.x - e.x, //x轴距离 l
                            y_dist = r.y - e.y, //y轴距离 n
                            dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
                        dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                            d = (e.max - dist) / e.max, 
                            context.beginPath(), 
                            context.lineWidth = d / 2, 
                            context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")", 
                            context.moveTo(r.x, r.y), 
                            context.lineTo(e.x, e.y), 
                            context.stroke());
                    }
                }
                all_array.splice(all_array.indexOf(r), 1);
            }), frame_func(draw_canvas);
        }
        //创建画布，并添加到body中
        var the_canvas = document.createElement("canvas"), //画布
            config = get_config_option(), //配置
            canvas_id = "c_n" + config.l, //canvas id
            context = the_canvas.getContext("2d"), canvas_width, canvas_height, 
            frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
                window.setTimeout(func, 1000 / 45);
            }, random = Math.random, 
            current_point = {
                x: null, //当前鼠标x
                y: null, //当前鼠标y
                max: 20000
            };
        the_canvas.id = canvas_id;
        the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
        get_by_tagname("body")[0].appendChild(the_canvas);
        //初始化画布大小
        set_canvas_size(), window.onresize = set_canvas_size;
        //当时鼠标位置存储，离开的时候，释放当前位置信息
        window.onmousemove = function(e) {
            e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
        }, window.onmouseout = function() {
            current_point.x = null, current_point.y = null;
        };
        //随机生成config.n条线位置信息
        for (var random_lines = [], i = 0; config.n > i; i++) {
            var x = random() * canvas_width, //随机位置
                y = random() * canvas_height,
                xa = 2 * random() - 1, //随机运动方向
                ya = 2 * random() - 1;
            random_lines.push({
                x: x,
                y: y,
                xa: xa,
                ya: ya,
                max: 6000 //沾附距离
            });
        }
        //0.1秒后绘制
        setTimeout(function() {
            draw_canvas();
        }, 100);
    }();
</script>

源码：

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>HTML5 Canvas鼠标移动圆点粒子跟随动画特效</title>

<style>
body,
html{
  margin: 0;
  padding: 0;
  border: 0;
  font-family: 'Nunito', sans-serif;
}

body{background:#000;}

canvas{
  margin: 0;
  padding: 0;
  display: block; /*  ˉ\_(ツ)_/ˉ  */
  touch-action: none; 
}
h1{
  position: absolute;
  top: 50%;
  left: 0;
  margin: auto;
  width: 100%;
  text-align: center;
  color:#fff;
}
</style>

<style>html, * {-webkit-user-select:text!important; -moz-user-select:text!important;}</style></head>
<body>

<h1>
 别害羞, 把鼠标挪过来!
</h1>

<canvas height="277" width="1920"></canvas>

<script>
var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
c = canvas.getContext('2d');

window.addEventListener('resize', function(){
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;

    initCanvas();
})

var mouse = {
    x: undefined,
    y: undefined
}
window.addEventListener('mousemove',
    function (event) {
        mouse.x = event.x;
        mouse.y = event.y;
        drawCircles();
    }
)
window.addEventListener("touchmove", 
    function (event) {
        let touch = event.touches[0];
        mouse.x = touch.clientX;
        mouse.y = touch.clientY;
        drawCircles();
    }
)

function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life){
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.minRadius = radius;
    this.vx = vx;
    this.vy = vy;
    this.birth = birth;
    this.life = life;
    this.opacity = opacity;

    this.draw = function() {
        c.beginPath();
        c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
        c.fillStyle = 'rgba(' + rgb +','+ this.opacity +')';
        c.fill();
    }

    this.update = function(){
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.vx = -this.vx;
        }

        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.vy = -this.vy;
        }

        this.x += this.vx;
        this.y += this.vy;

        this.opacity = 1- (((frame - this.birth) * 1) / this.life);

        if (frame > this.birth + this.life){
            for (let i = 0; i < circleArray.length; i++){
                if (this.birth == circleArray[i].birth && this.life == circleArray[i].life){
                    circleArray.splice(i, 1);
                    break;
                }
            }
        } else{
            this.draw();
        }
    }

}

var circleArray = [];

function initCanvas() {
    circleArray = [];
}

var colorArray = [
    '355,85,80',
    '9,80,100',
    '343,81,45'
]

function drawCircles(){
    for (let i = 0; i < 6; i++) {
        let radius = Math.floor(Math.random() * 4) + 2;
        let vx = (Math.random() * 2) - 1;
        let vy = (Math.random() * 2) - 1;
        let spawnFrame = frame;
        let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
        let life = 100;
        circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

    }
}

var frame = 0;
function animate() {
    requestAnimationFrame(animate);
    frame += 1;
    c.clearRect(0, 0, innerWidth, innerHeight);
    for (let i = 0; i < circleArray.length; i++ ){
        circleArray[i].update();
    }
    
}

initCanvas();
animate();

// This is just for demo purposes :
for (let i = 1; i < 110; i++) {
    (function (index) {
        setTimeout(function () { 
            mouse.x = 100 + i * 10;
            mouse.y = 100;
            drawCircles();
         }, i * 10);
    })(i);
}
</script>


</body></html>