一些原生的js小特效

一.这是一个鼠标跟随特效(使用画布)
html部分

js部分

window.onload = function(){
	C = Math.cos;
	S = Math.sin;
	U = 0;
	w = window;
	j = document;
	d = j.getElementById('c');
	c = d.getContext('2d');  //通过一个方法来获取可以调用一切 Canvas API 的入口
	W = d.width = w.innerWidth;
	H = d.height = w.innerHeight;
	c.fillRect(0,0,W,H); //左上角 x 坐标, 左上角 y 坐标, 宽度, 高度
	c.globalCompositeOperation = 'lighter';
	c.lineWidth = 0.2;
	c.lineCap = 'round';
	
	var bool = 0;
	    t = 0;
	    d.onmousemove = function(e){
	    	if(window.T){
	    		if(D == 9){
	    			D = Math.random()*15;
	    			f(1);
	    		}
	    		clearTimeout(T);
	    	}
	    	X = e.pageX;
	    	Y = e.pageY;
	    	a = 0;
	    	b = 0;
	    	A = X;
	    	B = Y;
	    	R = (e.pageX / W*999 >> 0 ) / 999;
	    	r = (e.pageY / H*999 >> 0) / 999;
	    	U = e.pageY / H *360 >> 0;
	    	D = 9;
	    	g = 360 * Math.PI / 100;
	    	T = setInterval(f = function(e){
	    		c.save();
	    		c.globalCompositeOperation = 'source-over';
	    		if(e != 1){
	    			c.fillStyle = 'rgba(0,0,0,0.02)';
	    			c.fillRect(0,0,W,H);	
	    		}
	    		c.restore();
	    		i = 25;
	    		while(i--){
	    			c.beginPath();
	    			if(D > 450 || bool){
	    			 if (!bool) { 
                        bool = 1;
                    }
                    if (D < 0.1) { 
                        bool = 0;
                    }
                    t -= g; 
                    D -= 0.1; 
                }
                if (!bool) {
                    t += g; 
                    D += 0.1;
                }
                q = (R / r - 1) * t; 
                x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R); 
                y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
                if (a) { 
                    c.moveTo(a, b);
                    c.lineTo(x, y)
                }
                c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; 
                c.stroke();
                a = x; 
                b = y; 
            }
            U -= 0.5; 
            A = X; 
            B = Y; 
        }, 16);
    }
    j.onkeydown = function(e) {
        a = b = 0;
        R += 0.05
    }
    d.onmousemove({
        pageX: 300,
        pageY: 290
    })
}

二.这是一个下雪的特效
html+css+js

三.这是一个加载样式的特效
html+css

四.这是一个滑块验证特效(存在小问题)
html+css+js

    
    
    
    

    


	
	

		

  	           账户:

  	           密码:     
		
	
  

        

        

        
拖动滑块完成验证
  
    



五.这是一个实现开关灯效果的特效
html+css+js

![关灯效果图](https://img-blog.csdnimg.cn/201908120935331.gif)
![开灯效果图](https://img-blog.csdnimg.cn/20190812093607815.jpg)