skong
/
html_css_demo
mirror of https://gitee.com/wyanhui02/html_css_demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

新增第162个小实例：科技感满满的鼠标移动推开粒子特效

This commit is contained in:
DESKTOP-BM6RJU5\wyanh 2022-06-07 16:40:56 +08:00
parent a40a30bef4
commit a51be71728
4 changed files with 46 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -168,4 +168,5 @@
158. HTML5+CSS3+JS小实例：快捷菜单图标按钮交互特效
159. HTML5+CSS3+JS小实例：翻滚吧乔巴自定义滑块控件
160. HTML5+CSS3小实例：带标题的3D多米诺人物卡片
161. HTML5+CSS3+JS小实例：环形文字动画特效
161. HTML5+CSS3+JS小实例：环形文字动画特效
162. HTML5+CSS3+JS小实例：科技感满满的鼠标移动推开粒子特效

19
code/162/162.css Normal file
View File

@ -0,0 +1,19 @@
*{
margin: 0;
padding: 0;
}
body{
background-color: #000;
overflow: hidden;
}
canvas{
width: 100%;
}
.text{
color: #fff;
letter-spacing: 2px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}

23
code/162/162.html Normal file
View File

@ -0,0 +1,23 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>科技感满满的鼠标移动推开粒子特效</title>
<link rel="stylesheet" href="162.css">
</head>
<body>
<canvas id="my_canvas"></canvas>
<div class="text">鼠标移动推开粒子</div>
</body>
</html>
<!-- 引入粒子插件 -->
<script src="particle.min.js"></script>
<script>
// 初始化粒子（画布id）
particle.init('my_canvas');
</script>

2
code/162/particle.min.js vendored Normal file
View File

@ -0,0 +1,2 @@
// 这个是我事先准备好的粒子插件
const particle={init:function(e){const t=document.getElementById(e),n=t.getContext("2d"),o=1;let a=t.width=window.innerWidth*o,c=t.height=window.innerHeight*o;const i=.05*a,s=.1*a,d=(e=1)=>Math.random()*e,l=Math.PI,r=2*l;let p=new Date;const h=(e,t,n)=>(1-n)*e+n*t,m=(e,t,n,o)=>{const a=e-n,c=t-o;return Math.sqrt(a*a+c*c)},y=new Array(400).fill({}).map(()=>({x:.5*a+Math.cos(d(r))*d(.5*a),y:.5*c+Math.sin(d(r))*d(.5*c),angle:d(r),speed:d(.15),normalSpeed:d(.15),oscAmplitudeX:d(2),oscSpeedX:.001+d(.008),oscAmplitudeY:d(2),oscSpeedY:.001+d(.008),connectDistance:d(i),color:{r:255,g:255,b:255}})),g=()=>{p=new Date,y.forEach(e=>{e.x+=(Math.cos(e.angle)+Math.cos(p*e.oscSpeedX)*e.oscAmplitudeX)*e.speed,e.y+=(Math.sin(e.angle)+Math.cos(p*e.oscSpeedY)*e.oscAmplitudeY)*e.speed,e.speed=h(e.speed,e.normalSpeed*o,.1),(e.x>a||e.x<0)&&(e.angle=l-e.angle),(e.y>c||e.y<0)&&(e.angle=-e.angle),d()<.005&&(e.oscAmplitudeX=d(2)),d()<.005&&(e.oscSpeedX=.001+d(.008)),d()<.005&&(e.oscAmplitudeY=d(2)),d()<.005&&(e.oscSpeedY=.001+d(.008)),e.x=Math.max(-.01,Math.min(e.x,a+.01)),e.y=Math.max(-.01,Math.min(e.y,c+.01))}),n.clearRect(0,0,a,c),y.map(e=>{y.filter(t=>e!=t&&!(m(e.x,e.y,t.x,t.y)>e.connectDistance)).map(t=>{const n=m(e.x,e.y,t.x,t.y);return e.speed=h(e.speed,e.speed+.05/e.connectDistance*n,.2),{p1:e,p2:t,color:e.color,opacity:Math.floor(100/e.connectDistance*(e.connectDistance-n))/100}}).forEach((e,t)=>{const o=Math.sin(p*e.p1.oscSpeedX);n.beginPath(),n.globalAlpha=e.opacity,n.moveTo(e.p1.x,e.p1.y),n.lineTo(e.p2.x,e.p2.y),n.strokeStyle=`rgb(\n\t\t\t\t\t${Math.floor(e.color.r*o)},\n\t\t\t\t\t${Math.floor(.5*e.color.g+.5*e.color.g*o)},\n\t\t\t\t\t${e.color.b}\n\t\t\t\t)`,n.lineWidth=4*e.opacity,n.stroke(),n.closePath()})}),window.requestAnimationFrame(g)};g(),window.addEventListener("mousemove",e=>{const t=e.layerX*o,n=e.layerY*o;y.forEach(e=>{const o=m(t,n,e.x,e.y);if(o<s&&o>0){e.angle=((e,t,n,o)=>Math.atan2(o-t,n-e))(t,n,e.x,e.y);const a=.1*(s-o);e.speed=h(e.speed,a,.2)}})}),window.addEventListener("resize",e=>{a=t.width=window.innerWidth*o,c=t.height=window.innerHeight*o})}};