Canva+html+css+js星星跟流星背景动画特效
1、新建html。
2、书写html。
<div class="canvas-box">
<canvas id="canvas">你的浏览器不支持canvas</canvas>
</div>
3、书写css。
<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>
4、书写js。
<script>
var WINDOW_WIDTH = document.body.offsetWidth;
var WINDOW_HEIGHT = document.body.offsetHeight;
var canvas,context;
var num = 500;
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);
for(var i =0; i<num ; i++){
var star = stars[i];
if(i == rnd){
star.vx = -5;
star.vy = 20;
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>
5、特效整体代码结构。
6、查看效果。
