每日鸡汤: 我不会告诉你,只要你努力,就能立刻逆袭。我只想告诉你,只要你努力,我们都能做一个独一无二的,平凡却可贵的自己。千错万错,你的付出不会有错。所以,年轻人啊,你一定一定要很努力,但千万千万别心急。

查看效果:http://test.jensonhui.top/meteorShower.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas梦幻星空背景</title>
<style>
    *{margin: 0;padding: 0;}
    html,body{height: 100%;}
    body{background: linear-gradient(to bottom, #131313 0%,#02101c 100%);}
    .canvas-box{position: fixed;left: 0;top: 0;z-index: -1;}
    .box{position: absolute;z-index: 10;color:#fff;font-family: Arial;left: 50%;top:50%;transform: translate(-50%,-50%);text-align: center;}
    a:link,a:hover,a:visited,a:active{text-decoration: none;color: inherit;display: block;}
    a{margin: 30px 0;font-size: 20px;}
</style>
</head>
<body>

<div class="canvas-box">
    <canvas id="canvas">你的浏览器不支持canvas</canvas>
</div>
<script>
    var WINDOW_WIDTH = document.body.offsetWidth;
    var WINDOW_HEIGHT = document.body.offsetHeight;
    var canvas,context;
    var num = 205;
    var stars = [];
    var mouseX = WINDOW_WIDTH/2;
    var mouseY = WINDOW_HEIGHT/2;
    var rnd;
    
    window.onload = function(){
        canvas = document.getElementById('canvas');
        canvas.width = WINDOW_WIDTH;
        canvas.height = WINDOW_HEIGHT;

        context = canvas.getContext('2d');
        addStar();
        setInterval(render,33);
        liuxing();

        // render();
        document.body.addEventListener('mousemove',mouseMove);
    }

    function liuxing(){
        var time = Math.round(Math.random()*3000+33);
        setTimeout(function(){
            rnd = Math.ceil(Math.random()*stars.length)
            liuxing();
        },time)
    }

    function mouseMove(e){
        //因为是整屏背景,这里不做坐标转换
        mouseX = e.clientX;
        mouseY = e.clientY;
    }

    function render(){
        context.fillStyle = 'rgba(0,0,0,0.1)';
        context.fillRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);
        // context.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT)
        for(var i =0; i<num ; i++){
            var star = stars[i];
            if(i == rnd){
                star.vx = -5;
                star.vy = 25;
                context.beginPath();
                context.strokeStyle = 'rgba(255,255,255,'+star.alpha+')';
                context.lineWidth = star.r;
                context.moveTo(star.x,star.y);
                context.lineTo(star.x+star.vx,star.y+star.vy);
                context.stroke();
                context.closePath();
            }
            star.alpha += star.ra;
            if(star.alpha<=0){
                star.alpha = 0;
                star.ra = -star.ra;
                star.vx = Math.random()*0.2-0.1;
                star.vy = Math.random()*0.2-0.1;
            }else if(star.alpha>1){
                star.alpha = 1;
                star.ra = -star.ra
            }
            star.x += star.vx;
            if(star.x>=WINDOW_WIDTH){
                star.x = 0;
            }else if(star.x<0){
                star.x = WINDOW_WIDTH;
                star.vx = Math.random()*0.2-0.1;
                star.vy = Math.random()*0.2-0.1;
            }
            star.y += star.vy;
            if(star.y>=WINDOW_HEIGHT){
                star.y = 0;
                star.vy = Math.random()*0.2-0.1;
                star.vx = Math.random()*0.2-0.1;
            }else if(star.y<0){
                star.y = WINDOW_HEIGHT;
            }
            context.beginPath();
            var bg = context.createRadialGradient(star.x, star.y, 0, star.x, star.y, star.r);
            bg.addColorStop(0,'rgba(255,255,255,'+star.alpha+')')
            bg.addColorStop(1,'rgba(255,255,255,0)')
            context.fillStyle  = bg;
            context.arc(star.x,star.y, star.r, 0, Math.PI*2, true);
            context.fill();
            context.closePath();
        }
    }

    function addStar(){
        for(var i = 0; i<num ; i++){
            var aStar = {
                x:Math.round(Math.random()*WINDOW_WIDTH),
                y:Math.round(Math.random()*WINDOW_HEIGHT),
                r:Math.random()*3,
                ra:Math.random()*0.05,
                alpha:Math.random(),
                vx:Math.random()*0.2-0.1,
                vy:Math.random()*0.2-0.1
            }
            stars.push(aStar);
        }
    }
</script>
</body>
</html>