在这篇文章中，我们将学习如何使用HTML、CSS和JavaScript创建一个令人印象深刻的粒子连接动画。这个动画效果使用粒子在屏幕上自由移动并相互连接，产生出令人赞叹的视觉效果。
这段代码的核心是使用HTML的Canvas元素以及JavaScript来生成和控制粒子的运动和连接。以下是一些关键部分的介绍：
Canvas元素: 我们使用<canvas>元素作为动画效果的呈现区域，并将其全屏显示。
粒子生成: 通过JavaScript，我们生成了多个粒子，它们随机分布在屏幕上。每个粒子具有不同的颜色、大小和运动轨迹。
粒子运动: 粒子在屏幕上以不同的速度和轨迹移动。它们的运动路径会受到随机因素的影响，从而创造出有趣的效果。
粒子连接: 我们通过在Canvas上绘制线条来连接不同粒子，从而形成一个连续的效果。这增加了动画的复杂性和吸引力。
这段代码会在浏览器中创建一个令人印象深刻的粒子连接动画。粒子以不同颜色和大小绘制在屏幕上，它们自由移动，并通过线条相互连接，产生出一个有趣且引人注目的视觉效果。
要在你的网站中使用这个效果，只需将以上代码嵌入到你的HTML文件中，并确保引用了所需的JavaScript库。然后，你可以在页面加载时触发动画效果，为你的网站增加炫酷的背景。
<canvas></canvas>
<script>
// 这里嵌入 JavaScript 代码
</script>
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>51炫酷网-粒子连接</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 10;
font-family: "Montserrat";
font-size: 12px;
}
a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
font-family: "Montserrat";
font-size: 12px;
text-decoration: none;
background: #212121;
padding: 4px 8px;
color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
background: #edf3f8;
color: #212121;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #000000;
}
.title {
z-index: 10;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
font-family: "Montserrat";
text-align: center;
width: 100%;
}
.title h1 {
position: relative;
color: #EEEEEE;
font-weight: 600;
font-size: 60px;
padding: 0;
margin: 0;
line-height: 1;
text-shadow: 0 0 30px #000155;
}
.title h1 span {
font-weight: 600;
padding: 0;
margin: 0;
color: #BBB;
}
.title h3 {
font-weight: 200;
font-size: 20px;
padding: 0;
margin: 0;
line-height: 1;
color: #EEEEEE;
letter-spacing: 2px;
text-shadow: 0 0 30px #000155;
}
</style>
</head>
<body>
<!--<div class="title">
<h3>PLASM.it - 2017</h3>
<h1>CONNECTIONS</h1>
<h3>dot-life</h3>
</div>--><script>
let max_particles = 100;
let particles = [];
let frequency = 100;
let init_num = max_particles;
let max_time = frequency*max_particles;
let time_to_recreate = false;
// Enable repopolate
setTimeout(function(){
time_to_recreate = true;
}.bind(this), max_time)
// Popolate particles
popolate(max_particles);
var tela = document.createElement('canvas');
tela.width = $(window).width();
tela.height = $(window).height();
$("body").append(tela);
var canvas = tela.getContext('2d');
class Particle{
constructor(canvas, options){
let colors = ["#feea00","#a9df85","#5dc0ad", "#ff9a00","#fa3f20"]
let types = ["full","fill","empty"]
this.random = Math.random()
this.canvas = canvas;
this.progress = 0;
this.x = ($(window).width()/2) + (Math.random()*200 - Math.random()*200)
this.y = ($(window).height()/2) + (Math.random()*200 - Math.random()*200)
this.w = $(window).width()
this.h = $(window).height()
this.radius = 1 + (8*this.random)
this.type = types[this.randomIntFromInterval(0,types.length-1)];
this.color = colors[this.randomIntFromInterval(0,colors.length-1)];
this.a = 0
this.s = (this.radius + (Math.random() * 1))/10;
//this.s = 12 //Math.random() * 1;
}
getCoordinates(){
return {
x: this.x,
y: this.y
}
}
randomIntFromInterval(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
render(){
// Create arc
let lineWidth = 0.2 + (2.8*this.random);
let color = this.color;
switch(this.type){
case "full":
this.createArcFill(this.radius, color)
this.createArcEmpty(this.radius+lineWidth, lineWidth/2, color)
break;
case "fill":
this.createArcFill(this.radius, color)
break;
case "empty":
this.createArcEmpty(this.radius, lineWidth, color)
break;
}
}
createArcFill(radius, color){
this.canvas.beginPath();
this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
this.canvas.fillStyle = color;
this.canvas.fill();
this.canvas.closePath();
}
createArcEmpty(radius, lineWidth, color){
this.canvas.beginPath();
this.canvas.arc(this.x, this.y, radius, 0, 2 * Math.PI);
this.canvas.lineWidth = lineWidth;
this.canvas.strokeStyle = color;
this.canvas.stroke();
this.canvas.closePath();
}
move(){
this.x += Math.cos(this.a) * this.s;
this.y += Math.sin(this.a) * this.s;
this.a += Math.random() * 0.4 - 0.2;
if(this.x < 0 || this.x > this.w - this.radius){
return false
}
if(this.y < 0 || this.y > this.h - this.radius){
return false
}
this.render()
return true
}
calculateDistance(v1, v2){
let x = Math.abs(v1.x - v2.x);
let y = Math.abs(v1.y - v2.y);
return Math.sqrt((x * x) + (y * y));
}
}
/*
* Function to clear layer canvas
* @num:number number of particles
*/
function popolate(num){
for (var i = 0; i < num; i++) {
setTimeout(
function(x){
return function(){
// Add particle
particles.push(new Particle(canvas))
};
}(i)
,frequency*i);
}
return particles.length
}
function clear(){
// canvas.globalAlpha=0.04;
canvas.fillStyle='#111111';
canvas.fillRect(0, 0, tela.width, tela.height);
// canvas.globalAlpha=1;
}
function connection(){
let old_element = null
$.each(particles, function(i, element){
if(i>0){
let box1 = old_element.getCoordinates()
let box2 = element.getCoordinates()
canvas.beginPath();
canvas.moveTo(box1.x,box1.y);
canvas.lineTo(box2.x,box2.y);
canvas.lineWidth = 0.45;
canvas.strokeStyle="#3f47ff";
canvas.stroke();
canvas.closePath();
}
old_element = element
})
}
/*
* Function to update particles in canvas
*/
function update(){
clear();
connection()
particles = particles.filter(function(p) { return p.move() })
// Recreate particles
if(time_to_recreate){
if(particles.length < init_num){ popolate(1);}
}
requestAnimationFrame(update.bind(this))
}
update()
</script>
</body>
</html>通过使用HTML、CSS和JavaScript，你可以轻松地为你的网站添加令人印象深刻的粒子连接动画。这种动画效果不仅吸引眼球，还增加了网站的交互性和视觉吸引力。尝试将这个代码嵌入到你的网站中，为访问者带来一个令人难忘的动画体验吧！
