效果如图：
完整代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body{background-color: black;width: 100%;height: 100%;overflow: hidden;}.star{position: absolute;width: 0;height: 0;opacity: 0.2;border: 2px solid transparent;border-bottom: 4px solid #fff;animation: flash 2s infinite linear;}.star::before{content: "";position: absolute;left: -2px;top: 4px;border: 2px solid transparent;border-top: 4px solid #fff;}@keyframes flash{20%{opacity: 0.2;}40%{opacity: 0.5;}60%{opacity: 1;}80%{opacity: 0.5;}100%{opacity: 0.2;}}</style></head><body></body><canvas id="Meteor"></canvas><script>var starCount = 300;function starInit(){var bg = document.querySelector("body");for(var i = 0;i<starCount;i++){var star = document.createElement("div");star.classList.add("star");bg.appendChild(star);}}function starPosition(){var stars = document.querySelectorAll(".star");for(var i = 0; i<starCount;i++){stars[i].style.left = Math.random()*window.innerWidth + "px";stars[i].style.top = Math.random()*window.innerHeight + "px";stars[i].style.animationDelay = Math.random()*10 + "s";}}function init(){var Meteor = document.getElementById("Meteor");Meteor.width = window.innerWidth;Meteor.height = window.innerWidth;context = Meteor.getContext("2d");}function MeteorRain(){this.x = Math.random()*window.innerWidth;this.y = Math.random()*window.innerHeight;this.length = Math.ceil(Math.random()*80+150);this.angle = 30;this.cos = Math.cos((this.angle*3.14)/180);this.sin = Math.sin((this.angle*3.14)/180);this.width = this.length*this.cos;this.height = this.length*this.sin;this.speed = Math.ceil(Math.random() + 0.5);this.shifting_x = this.speed * this.cos;this.shifting_y = this.speed * this.sin;this.coutPos = function(){this.x = this.x - this.shifting_x;this.y = this.y + this.shifting_y;};this.draw = function(){context.save();context.beginPath();context.lineWidth = 1;context.globalAlpha = this.alpha;var line = context.createLinearGradient(this.x,this.y,this.x + this.width,this.y + this.height);line.addColorStop(0,"white");line.addColorStop(0.5,"grey");line.addColorStop(1.0,"black");context.strokeStyle = line;context.moveTo(this.x,this.y);context.lineTo(this.x + this.width,this.y - this.height);context.closePath();context.stroke();context.restore();};this.move = function(){var x = this.x + this.width - this.shifting_x;var y = this.y - this.height + this.shifting_y;context.clearRect(x - 3,y - 3,this.shifting_x + 5,this.shifting_y + 5);this.coutPos();this.alpha -= 0.002;this.draw();};}function playRains(){for(var i = 0;i<rainCount;i++){var rain = rains[i];rain.move();if(rain.y>window.innerHeight){context.clearRect(rain.x,rain.y - rain.height,rain.width,rain.height);rains[i] = new MeteorRain();}}setTimeout("playRains()",2);}var rainCount = 20;var rains = new Array();init();starInit();starPosition();for(var i = 0;i<rainCount;i++){var rain = new MeteorRain();rain.draw();rains.push(rain);}playRains();</script></html>
