一些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 = '\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t';

     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; width: 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>