HTML+CSS实现页面粒子动画背景效果
https://attach.52pojie.cn/forum/202204/07/163148p7ucfg5tc7zt5e8v.gif<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>粒子</title>
<style>
html,body,canvas{margin: 0px;padding: 0px;}
html,body{
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas" style="width: 100%;height: 100%;background: #000;"></canvas>
</body>
<script>
window.requestAnimationFrame=(function(){
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
function (callback){
window.setTimeout(callback,1000/60);
};
})();//兼容setTimeout
var can=document.getElementById("canvas");
var cxt=can.getContext("2d");//画布为2D
//画布大小
can.width=window.innerWidth;
can.height=window.innerHeight;
//圆形粒子统计
var attr={
num:300,//粒子个数
array:[]//保存N个粒子对象
}
//创建粒子存入数组
function cerateCircle(){
for(let i=0;i<attr.num;i++){
attr.array.push(new Circle());
}
}
//绘制一个圆,确定位置大小，速度
function Circle(){
this.x=Math.floor(Math.random()*can.width);
this.y=Math.floor(Math.random()*can.height);
this.r=Math.floor(Math.random()*5)<3?3:Math.floor(Math.random()*5);
this.vx=-0.5+Math.random();
this.vy=-0.5+Math.random();
this.color=createColor();
}
//绑定绘制粒子函数方法
Circle.prototype.draw=function(){
cxt.beginPath();
cxt.fillStyle=this.color;
cxt.arc(this.x,this.y,this.r,0,Math.PI*2);
cxt.fill();
cxt.closePath();
}
//颜色生成函数
function createColor(){
let r=Math.floor(Math.random()*255);
let g=Math.floor(Math.random()*255);
let b=Math.floor(Math.random()*255);
return "rgb(" + r + "," + g + "," + b + ")";
}
//页面开始绘制
function drawCircle(){
for(let i=0;i<attr.num;i++){
var dot=attr.array;
dot.draw();
}
}
//以上内容实现粒子静态绘制
//粒子运动
function moveCircle(){
for(let i=0;i<attr.num;i++){
var dot=attr.array;
if(dot.y<0||dot.y>can.height){
dot.vx=dot.vx
dot.vy=-dot.vy
}else if(dot.x<0||dot.x>can.width){
dot.vx=-dot.vx;
dot.vy=dot.vy;
}
dot.x+=dot.vx;
dot.y+=dot.vy;
}
}
//粒子之间连线
function connectCircle(){
for(let i=0;i<attr.num;i++){
for(let j=0;j<attr.num;j++){
iCircle=attr.array;//两个圆
jCircle=attr.array;//两个园
if(Math.sqrt((Math.pow((iCircle.x-jCircle.x),2))+(Math.pow((iCircle.y-jCircle.y),2)))<=20){
drawLine(iCircle.x,iCircle.y,jCircle.x,jCircle.y);
}
}
}
}
//画线函数
function drawLine(x1,y1,x2,y2){
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.strokeStyle=createColor();
cxt.stroke();
cxt.closePath();
}
//动起来，递归
function loop(){
requestAnimationFrame(loop);//递归
cxt.clearRect(0,0,can.width,can.height);
cerateCircle();//创建
drawCircle();//绘制
connectCircle();//连线
moveCircle();//移动
drawMouse();//鼠标连线
}
//鼠标添加事件，连线
can.addEventListener('mousemove',function(e){
e=e||event;
mx=e.pageX-can.offsetLeft;
my=e.pageY-can.offsetTop;
});
function drawMouse(){
for(let i=0;i<attr.num;i++)
{
if (Math.sqrt((Math.pow((attr.array.x-mx),2))+(Math.pow((attr.array.y-my),2)))<=20){
drawLine(attr.array.x,attr.array.y,mx,my);
}
}
}
loop();
cerateCircle();//创建
drawCircle();//绘制
connectCircle();//连线
</script>
</html>
谢谢大佬 谢谢分享 感谢楼主分享 多谢楼主分享 水波纹动态可以吗
页:
[1]