前言
网页互动效果不一定都要复杂的框架加持。有时候几行原生代码，就能做出让人眼前一亮的动态效果。今天想分享一个我做的小案例：鼠标在页面上移动时，会从光标位置冒出一串带光晕的粒子，它们会向随机方向飘散然后慢慢消失。整个效果不依赖任何库，纯 HTML、CSS 和原生 JS 就能实现，新手也能看懂。
效果预览
当你在页面上移动鼠标时，光标经过的地方会即时生成一个个白色小圆点（粒子）。这些粒子带着淡淡的蓝色光晕，会朝着随机的斜向方向移动（上下左右都有可能），移动过程中逐渐变得透明，最后完全消失。背景是深色的，粒子的动态轨迹会看得特别清楚，整体有种轻盈又灵动的感觉。
目标与实现思路
核心目标
实现鼠标移动时动态生成粒子，粒子有随机的大小、移动方向和存在时长，最终自动消失
实现思路
监听鼠标移动事件，获取实时坐标
每次触发事件时，动态创建一个粒子元素
给粒子设置随机的大小、移动距离和动画时长
用 CSS 动画控制粒子的位移和透明度变化
动画结束后自动移除粒子元素，避免占用资源
HTML结构说明
整个 HTML 结构非常简洁：只有基础的文档结构，引入了 CSS 样式文件，然后在 body 里放了一段 JavaScript 脚本。没有多余的标签，所有粒子都是通过 JS 动态创建并添加到 body 中的，这样既保证了结构干净，又能灵活控制粒子的生成时机。
CSS样式详解
body 样式
min-height: 100vh让页面占满整个视口，overflow: hidden隐藏滚动条，避免粒子移动时出现页面滚动
.particle 类
position: absolute：让粒子可以基于页面绝对定位，方便通过 left 和 top 设置初始位置
border-radius: 50%：把正方形变成圆形粒子
box-shadow：内层阴影增加质感，外层的蓝色阴影 (#1235f4) 营造光晕效果，让粒子更醒目
动画 (@keyframes animate)：
从
opacity: 1到opacity: 0：实现粒子逐渐消失的效果
transform: translate(var(--move-x), var(--move-y))：通过 CSS 变量接收 JS 传来的随机移动距离，让每个粒子的轨迹都不一样
完整源码附录
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粒子背景效果</title>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<script>
// 获取body元素，用于添加粒子
let body = document.querySelector('body');
// 创建粒子的函数（接收鼠标坐标x,y）
function createParticle(x,y){
// 创建一个div作为粒子
let particle = document.createElement('div');
// 添加粒子样式类
particle.classList.add('particle');
// 设置粒子初始位置（鼠标当前位置）
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
// 生成随机移动距离（左右、上下方向）
let moveX = (Math.random() - 0.5) * 400; // -200到200之间的随机值
let moveY = (Math.random() - 0.5) * 400;
// 把随机距离存入CSS变量，供动画使用
particle.style.setProperty('--move-x', `${moveX}px`);
particle.style.setProperty('--move-y', `${moveY}px`);
// 生成随机大小（2px到8px之间）
let size = Math.random() * 6 + 2;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
// 生成随机动画时长（2s到5s之间）
let duration = Math.random() * 3 + 2;
particle.style.animationDuration = `${duration}s`;
// 把粒子添加到页面
body.appendChild(particle);
// 动画结束后移除粒子（避免元素堆积）
setTimeout(() => {
particle.remove()
}, duration * 1000);
}
// 监听鼠标移动事件，每次移动都创建粒子
document.addEventListener('mousemove', e => {
createParticle(e.clientX, e.clientY)
})
</script>
</body>
</html>
style.css
/* 清除默认内外边距，统一盒模型 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面基础样式 */
body{
min-height: 100vh; /* 占满整个视口高度 */
background: #00040d; /* 深色背景，突出粒子 */
overflow: hidden; /* 隐藏滚动条 */
}
/* 粒子样式 */
.particle{
position: absolute; /* 绝对定位，方便控制位置 */
width: 6px;
height: 6px;
background: #fff; /* 粒子本身是白色 */
border-radius: 50%; /* 圆形粒子 */
/* 阴影效果：内层增加质感，外层蓝色光晕 */
box-shadow: inset 0 0 2px #121212,
0 0 5px #1235f4,
0 0 10px #1235f4;
animation: animate linear forwards; /* 应用动画 */
}
/* 粒子动画：控制移动和消失 */
@keyframes animate{
0%{
opacity: 1; /* 初始完全可见 */
transform: translate(0,0) scale(1); /* 初始位置 */
}
100%{
opacity: 0; /* 最终完全透明 */
/* 移动到目标位置（使用CSS变量） */
transform: translate(var(--move-x),var(--move-y)) scale(1);
}
}
结语 & 行动建议
这个小效果其实还有很多可以发挥的空间。比如你可以试着改改粒子的颜色，换成粉色系可能会更柔和；或者调整moveX、moveY的数值范围，让粒子飞得更远或更近；甚至可以把鼠标移动触发改成点击触发，做成点击爆破的效果。 代码量很少，逻辑也不复杂，特别适合新手动手试试。复制源码到本地，然后一点点调整参数，看看每个数值变化会带来什么不同 —— 这种亲手调试的过程，比单纯看教程记得更牢。不妨现在就打开编辑器，自己改出一个独一无二的粒子效果吧～
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
