网页的粒子效果

之前在浏览博客的时候,发现了粒子效果,现在图如下:

现把代码贴出来,供大家参考:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
html,body{width:100%:height:100%;overflow:hidden;}
</style>
</head>
<body>
<canvas width="1280" height="910" id="c1"></canvas>
<script src="../jQuery/jquery-1.11.0.js"></script>
<script>
var body = document.body;
var oC = document.getElementById("c1");
var c = oC.getContext("2d");
var arr = [];
var count = 300;
var mouse = {};
document.onmousemove = function(evt){
var e = evt || window.event;
mouse = {
xx : e.clientX,
yy : e.clientY
}
}
document.onmouseleave = function(){
                mouse = undefined;
            }
document.oncontextmenu = function(){
return false;
}
function ty(){
c.clearRect(0,0,oC.width,oC.height);
for(var i = 0;i < count;i++){
if(arr.length != count){
p = {
x : Math.floor(Math.random() * body.clientWidth),
y : Math.floor(Math.random() * body.clientHeight),
vx : 1 - Math.random() * 2,
vy : 1 - Math.random() * 2,
num:0
}
}else{
p = hua(arr[i]);
}
c.fillStyle = "deepskyblue";
c.fillRect(p.x,p.y,2,2);
arr[i] = p;
}
jiance(mouse);
}
setInterval(function(){
ty();
},20)
function hua(p){
var a = p;
if(p.x <= 0 || p.x >= oC.width){
a.vx = -p.vx;
a.x += a.vx;
}else if(p.y <= 0 || p.y >= oC.height){
a.vy = -a.vy;
a.y += a.vy;
}else{
a = {
x:a.x + a.vx,
y:a.y + a.vy,
vx:a.vx,
vy:a.vy,
num:0
}
}
return a;
}
function jiance(mouse){
for(var i = 0;i < arr.length;i++){
for(var j = 0;j < arr.length;j++){
if(i != j){
var len = Math.round(arr[i].x - arr[j].x) * Math.round(arr[i].x - arr[j].x) + Math.round(arr[i].y - arr[j].y) * Math.round(arr[i].y - arr[j].y)
if(len <= 5000 && arr[i].num < 6){
arr[i].num++;
c.lineWidth = 0.5 - len / 2000;
c.beginPath();
c.strokeStyle = "lime";
c.moveTo(arr[i].x + 2,arr[i].y + 2);
c.lineTo(arr[j].x,arr[j].y);
c.stroke();
}
}
}
if(mouse){
var leng = Math.round(arr[i].x - mouse.xx)*Math.round(arr[i].x - mouse.xx)+Math.round(arr[i].y - mouse.yy)*Math.round(arr[i].y - mouse.yy);
if(leng > 5000 && leng <= 20000){
arr[i].x = arr[i].x + (mouse.xx - arr[i].x) / 20;
arr[i].y = arr[i].y + (mouse.yy - arr[i].y) / 20;
}
if(leng <= 20000){
c.lineWidth = 1;
c.strokeStyle = "yellow";
c.beginPath();
c.moveTo(arr[i].x,arr[i].y);
c.lineTo(mouse.xx,mouse.yy);
c.stroke();
}
}
}
}
</script>
</body>
</html>

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
明日方舟官网粒子特效是指在明日方舟官方网站上使用的一种特效效果,用于增强网站的视觉吸引力和用户体验。这些粒子特效通常以动态的、流动的、闪烁的方式展现,可以呈现出各种形状、颜色和运动效果。 具体来说,明日方舟官网粒子特效可能包括以下几个方面的设计和实现: 1. 粒子系统:通过使用粒子系统技术,可以在网页上生成大量的小粒子,并对其进行控制和调整。这些小粒子可以具有不同的形状、大小、颜色和运动轨迹,从而形成各种炫酷的特效效果。 2. 动画效果:通过对粒子的位置、透明度、旋转等属性进行动态变化,可以实现流动、闪烁、爆炸等各种动画效果。这些动画效果可以使网页更加生动有趣,吸引用户的注意力。 3. 交互效果:在用户与网页进行交互时,可以通过触发特定事件来改变粒子的行为。例如,当用户鼠标悬停在某个区域时,粒子可以聚集或散开;当用户点击某个按钮时,粒子可以爆炸或消失等等。 4. 背景效果粒子特效还可以用作网页的背景效果,为整个页面增添动感和层次感。通过调整粒子的密度、速度和颜色等参数,可以创建出各种炫丽的背景效果,使网页更加引人注目。 总的来说,明日方舟官网粒子特效通过使用粒子系统、动画效果、交互效果和背景效果等技术手段,为官网带来了更加生动、炫酷的视觉效果,提升了用户的浏览体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值