以下是一个使用JavaScript制作带有动态粒子背景的登录界面的示例代码：

html

body {
margin: 0;
padding: 0;
overflow: hidden;
}

canvas {
position: absolute;
top: 0;
left: 0;
}

#login-form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
text-align: center;
}

#login-form input {
display: block;
margin: 10px auto;
padding: 10px;
width: 200px;
}

#login-form button {
padding: 10px 20px;
background-color: #4CAF50;
color: #fff;
border: none;
cursor: pointer;
border-radius: 5px;
}

// 粒子对象
function Particle(x, y, radius) {
this.init(x, y, radius);
}

Particle.prototype = {
init: function (x, y, radius) {
this.alive = true;
this.radius = radius || 10;
this.wander = 0.15;
this.theta = random(TWO_PI);
this.drag = 0.92;
this.color = '#fff';

this.x = x || 0.0;
this.y = y || 0.0;

this.vx = 0.0;
this.vy = 0.0;
},

move: function () {
this.x += this.vx;
this.y += this.vy;

this.vx *= this.drag;
this.vy *= this.drag;

this.theta += random(-0.5, 0.5) * this.wander;
this.vx += sin(this.theta) * 0.1;
this.vy += cos(this.theta) * 0.1;

this.radius *= 0.96;
this.alive = this.radius > 0.5;
},

draw: function (ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, TWO_PI);
ctx.fillStyle = this.color;
ctx.fill();
}
};

// 创建canvas和粒子
var canvas = document.getElementById('particles');
var context = canvas.getContext('2d');
var particles = [];
var particleIndex = 0;

function createParticle(x, y) {
var radius = random(5, 20);
particles[particleIndex] = new Particle(x, y, radius);
particleIndex = (particleIndex + 1) % 500;
}

// 动画循环
function loop() {
context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particles.length; i++) {
if (particles[i].alive) {
particles[i].move();
particles[i].draw(context);
}
}

requestAnimationFrame(loop);
}

// 工具函数
function random(min, max) {
return Math.random() * (max - min) + min;
}

function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

// 初始化
function initialize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

document.addEventListener('mousemove', onMouseMove);
window.addEventListener('resize', initialize);

loop();
}

// 鼠标移动时创建粒子
function onMouseMove(event) {
var x = event.clientX;
var y = event.clientY;

var particleCount = randomInt(5, 20);
for (var i = 0; i < particleCount; i++) {
createParticle(x, y);
}
}

initialize();

这个示例中使用了HTML和CSS来创建登录界面，JavaScript代码则负责创建和动画粒子效果。鼠标移动时会创建一些粒子，粒子会随机移动并逐渐消失。请将代码保存为一个HTML文件并在浏览器中打开以查看效果。