高颜值星光跟随鼠标特效代码（附完整使用教程）
一、特效介绍
本特效为唯美星光粒子跟随鼠标效果，鼠标移动时会生成渐变白色星光粒子，粒子缓缓飘落、淡化消失，动态效果柔和高级，不卡顿、不影响网站原有功能，适配PC端所有网页、博客、个人官网、企业展示站。
特效特点：
-
轻量代码，无冗余，加载速度快
-
自适应屏幕，兼容所有主流浏览器
-
粒子大小、速度、颜色可自定义修改
-
不遮挡页面内容，视觉质感拉满
二、完整特效源码
以下为纯原生JS+CSS代码，无需任何插件，直接复制即可使用。
<!-- 鼠标星光特效 开始 -->
<style>
/* 重置特效层级，不遮挡页面元素 */
.mouse-star {
position: fixed;
pointer-events: none;
z-index: 9999;
opacity: 0;
transform: translate(-50%, -50%);
animation: starMove 1s ease-out forwards;
}
/* 粒子飘落淡化动画 */
@keyframes starMove {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -200%) scale(0.3);
}
}
</style>
<script>
// 鼠标星光粒子特效
window.addEventListener('mousemove', function(e) {
// 创建粒子元素
const star = document.createElement('div');
star.className = 'mouse-star';
// 随机星光大小
const size = Math.random() * 8 + 4;
star.style.width = size + 'px';
star.style.height = size + 'px';
// 渐变白色星光配色
star.style.background = 'radial-gradient(#ffffff, #e0f0ff)';
star.style.borderRadius = '50%';
// 定位跟随鼠标
star.style.left = e.clientX + 'px';
star.style.top = e.clientY + 'px';
document.body.appendChild(star);
// 1秒后删除粒子，防止页面堆积卡顿
setTimeout(() => {
star.remove();
}, 1000);
})
</script>
<!-- 鼠标星光特效 结束 -->
三、零基础使用教程
方法一：通用网页/静态HTML网站使用（最简单）
1、打开你的网站源代码，找到页面底部 </body> 标签；
2、将上面完整代码，直接粘贴在 </body> 上方；
3、保存文件，刷新网站页面，鼠标移动即可看到星光特效。
方法二：WordPress/凡科/织梦等建站程序使用
1、登录网站后台，找到「网站设置」「自定义代码」「底部代码」功能；
2、将完整代码粘贴到全局底部自定义代码框；
3、保存设置，清空网站缓存，前台刷新即可生效。
方法三：Vue/React前端项目使用
1、将style样式放入全局样式文件（global.css）；
2、将script内的JS代码，放入项目入口文件（main.js）；
3、重启项目，特效即可全局生效。
四、自定义修改参数（可自由DIY）
按需修改代码内参数，调整专属特效样式：
-
修改粒子大小：找到
Math.random() * 8 + 4，调大数字粒子更大，调小更细腻 -
修改特效时长：找到
1s ease-out和1000，改为1.5s、2s可延长飘落时间 -
修改粒子颜色：替换
radial-gradient(#ffffff, #e0f0ff)色值，可换成粉色、蓝色、金色 -
修改飘落距离：找到
translate(-50%, -200%)，数值越大飘得越高
五、常见问题解答
-
特效不生效？ 检查代码是否粘贴在body标签内，清除浏览器缓存、网站缓存重试；
-
页面卡顿？ 本代码轻量无卡顿，若设备配置低，可适当调小粒子大小；
-
手机端显示？ 本特效仅PC端生效（适配电脑网站），手机端自动不触发，不影响移动端体验。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
暂无评论内容