鼠标粒子拖尾效果

已于 2025-06-27 14:16:19 修改
阅读量638 收藏 7
点赞数 22
CC 4.0 BY-SA版权
文章标签： javascript 前端 开发语言
于 2025-05-21 16:54:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148119835

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标粒子拖尾效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #000;
            cursor: none;
        }
        canvas {
            display: block;
        }
        .link {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: white;
            font-family: Arial, sans-serif;
            text-decoration: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
 

    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        let particles = [];
        const particleCount = 50;
        const mouse = { x: null, y: null };
        
        // 设置画布大小为窗口大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        
        // 鼠标移动事件
        window.addEventListener('mousemove', (e) => {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
        });
        
        // 鼠标离开窗口时
        window.addEventListener('mouseout', () => {
            mouse.x = null;
            mouse.y = null;
        });
        
        // 粒子类
        class Particle {
            constructor() {
                this.x = mouse.x || Math.random() * canvas.width;
                this.y = mouse.y || Math.random() * canvas.height;
                this.size = Math.random() * 5 + 1;
                this.speedX = Math.random() * 3 - 1.5;
                this.speedY = Math.random() * 3 - 1.5;
                this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
                this.opacity = Math.random() * 0.6 + 0.4;
            }
            
            update() {
                if (mouse.x && mouse.y) {
                    const dx = mouse.x - this.x;
                    const dy = mouse.y - this.y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < 100) {
                        this.x += dx * 0.05;
                        this.y += dy * 0.05;
                    } else {
                        this.x += this.speedX;
                        this.y += this.speedY;
                    }
                } else {
                    this.x += this.speedX;
                    this.y += this.speedY;
                }
                
                // 边界检查
                if (this.x > canvas.width || this.x < 0) {
                    this.speedX = -this.speedX;
                }
                if (this.y > canvas.height || this.y < 0) {
                    this.speedY = -this.speedY;
                }
                
                // 随机改变大小和透明度
                this.size = Math.max(0.5, this.size - 0.01);
                this.opacity = Math.max(0.1, this.opacity - 0.002);
            }
            
            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.globalAlpha = this.opacity;
                ctx.fill();
                ctx.globalAlpha = 1;
            }
        }
        
        // 初始化粒子
        function init() {
            particles = [];
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
        }
        
        // 动画循环
        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 更新和绘制粒子
            for (let i = 0; i < particles.length; i++) {
                particles[i].update();
                particles[i].draw();
                
                // 如果粒子太小或太透明，替换新的粒子
                if (particles[i].size <= 0.5 || particles[i].opacity <= 0.1) {
                    particles.splice(i, 1);
                    particles.push(new Particle());
                }
            }
            
            // 绘制粒子间的连线
            drawConnections();
            
            requestAnimationFrame(animate);
        }
        
        // 绘制粒子间的连线
        function drawConnections() {
            for (let i = 0; i < particles.length; i++) {
                for (let j = i + 1; j < particles.length; j++) {
                    const dx = particles[i].x - particles[j].x;
                    const dy = particles[i].y - particles[j].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    
                    if (distance < 100) {
                        ctx.beginPath();
                        ctx.strokeStyle = particles[i].color;
                        ctx.globalAlpha = 0.5 * (1 - distance / 100);
                        ctx.lineWidth = 0.5;
                        ctx.moveTo(particles[i].x, particles[i].y);
                        ctx.lineTo(particles[j].x, particles[j].y);
                        ctx.stroke();
                        ctx.globalAlpha = 1;
                    }
                }
            }
        }
        
        init();
        animate();
    </script>
</body>
</html>

ziblog
关注
Android实现触摸跟随彗星拖尾效果
y280903468的博客
10-10 521
实现思路，在触摸事件中设置定时存储坐标点，通过坐标点的集合生成贝塞尔曲线显示在自定义View中。
HTML5鼠标移动光束粒子动画特效.zip
07-05
在这个特效中，JavaScript监听鼠标的移动事件，然后根据鼠标的位置更新粒子的位置和行为，实现粒子随着鼠标移动而变化的效果。 动画的实现通常涉及到时间帧的处理。开发者可能使用requestAnimationFrame函数来创建...
使用css和js实现鼠标拖尾特效
weixin_43941291的博客
07-15 6927
<style type="text/css"> div { position: absolute; width: 1em; height: 1em; display: block; -moz-user-select: none; -khtml-user-select: none; user-select: none; } </style> <
鼠标拖尾特效
2301_76380626的博客
10-28 350
准备一个元素类来描述速报拖尾的元素。
html鼠标拖尾效果,前端每日实战：25# 视频演示如何用纯 CSS 创作一个慧星拖尾效果的 loader 动画...
weixin_42310670的博客
06-03 424
效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。源代码下载每日前端实战系列的全部源代码请从 github 下载：代码解读定义dom，设置3层容器：居中显示：html,body,.loader {height: 100%;display: fl...
鼠标小星星拖尾特效
zichenblog的博客
06-06 922
移动鼠标查看炫酷的星星拖尾效果彩色小星星随机生成，每个星星都有独特的颜色</li><li>星星拖尾长度可自定义，形成流畅的跟随效果</li><li>星星大小随机变化，增加视觉效果</li><li>平滑的淡出动画，营造梦幻氛围
JavaScript + HTML5 Canvas 实现互动爱心雨
hl826669的博客
02-14 2158
【代码】JavaScript + HTML5 Canvas 实现互动爱心雨。
一个鼠标拖影、拖尾Flash效果源文件.rar
07-10
这个“一个鼠标拖影、拖尾Flash效果源文件.rar”包含了实现这种特效的完整源代码，我们可以借此深入理解其背后的原理和实现方法。 首先，鼠标拖影效果的实现主要基于ActionScript，这是Flash中的编程语言，用于控制...
jQuery鼠标点击弹出粒子效果动画特效代码
03-20
本篇文章将深入探讨一个基于jQuery实现的名为"clickspark"的粒子特效插件，它能够实现在鼠标点击时触发炫酷的粒子动画效果。 jQuery，作为一个轻量级的JavaScript库，以其简洁的API和广泛的社区支持，成为了前端...
js配合Canvas实现拖尾特效.zip
09-29
4. **更新粒子状态**：根据粒子的速度和方向更新它们的位置，同时保存旧位置以形成拖尾效果。 ```javascript function updateTrail() { for (let particle of trailParticles) { particle.prevX = particle.x; ...
HTML5拖尾效果
weixin_30445169的博客
08-04 680
HTML5拖尾效果 body{background-color:white; margin: 10px 0 0 10px; width:98%;} #allHead{display:none} #allFoot{display:none} #footLine{display:none} loading…… 转载于:h...
jquery+css实现鼠标滑动彩虹圈特效
qq_24665727的博客
03-16 1291
完整的制作过程在下面的文档里面，里面还包含了需要的素材，jquery包和图片 
使用css和js实现鼠标拖尾特效（七彩泡泡）
weixin_43941291的博客
07-21 4445
一 css样式 <style> *{ margin:0;padding:0; } body{overflow:hidden;} #canvas{ background-color:black; } </style> 二 html里添加canvas： <canvas id="canvas" ></canvas> 三 js： <script> var canvas = document.querySelector('#canv
JS-鼠标彩色拖尾小效果
weixin_34117522的博客
05-02 2165
实现步骤解析： * 这原本就是一个鼠标后面跟随一串小方块的效果， * 后来我就想，运用之前学的随机数的案例把小方块的颜色做成彩色的， * 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。 1 function getColor(){ 2 var oMath = Math.flo...
Next.js 简介：它是什么，为什么重要？
zimin的专栏
08-01 1129
Next.js 是一个基于 React 的全栈框架，旨在帮助开发者构建高性能、可扩展的 Web 应用。它由 Vercel 开发并维护，是一个开源项目，最初于 2016 年 10 月 25 日在 GitHub 上发布。Next.js 为 React 组件提供了额外的功能和优化，使开发者能够专注于产品的构建和快速交付，而无需手动配置底层工具（如 Webpack、Babel）。它的核心特点包括： 服务器端渲染（SSR）：在服务器上渲染页面，提高首屏加载速度和搜索引擎优化（SEO）表现。 静态站点生成（SSG）：
vue3入门-概览讲解
最新发布
曹定栓的博客
08-04 567
本文介绍了Vue3项目创建和基本结构，重点对比了Vue2选项式API和Vue3组合式API的差异。Vue3使用Vite作为构建工具，相比Webpack具有更快的启动和热更新速度。文章通过一个显示div和切换背景色的示例，展示了组合式API将相关逻辑集中管理的优势，并介绍了如何通过模块化拆分setup函数来提高可维护性。最后指出选项式API适合简单场景，而组合式API更适合复杂逻辑复用和TypeScript项目。
electron-多线程
在全栈和前端徘徊的程序员
08-03 623
基于 Chromium 多进程架构：每个渲染器运行在独立的进程中，避免单个页面的崩溃影响整个应用Node.js 多线程能力：通过 worker_threads 模块实现真正的多线程执行：在渲染进程中使用浏览器标准的 Web Workers APIIPC 通信机制：通过消息传递在不同进程/线程间交换数据资源共享与隔离：各进程拥有独立的内存空间，通过 IPC 实现数据共享。
ElementUI常用的组件展示
2302_78879607的博客
08-03 425
有时也会嵌套抽屉使用，例如： 一般都加在第一列：找到展示表格数据的部分加进去即可，一般要考虑获得选中的内容 @selection-change=“handleSelectionChange”，当selection-change触发时（复选框发生改变），就会调用后面的函数
Html写鼠标粒子效果。
03-23
<think>好的，用户想了解如何在HTML中实现鼠标粒子效果。首先，我需要回忆一下常见的实现方法。通常，这种效果会用到HTML5的Canvas元素，结合JavaScript来处理动画和交互。 首先，我应该确定基本的结构。需要创建一个Canvas元素，并设置其覆盖整个窗口，同时确保当窗口大小变化时Canvas能自适应调整。然后，监听鼠标的移动事件，获取鼠标的位置。 接下来是粒子效果的实现。粒子通常用对象或数组来管理，每个粒子有位置、速度、大小、颜色等属性。可能需要一个Particle类来封装这些属性和更新、绘制的方法。 然后，考虑动画循环。使用requestAnimationFrame来不断更新粒子的位置并重新绘制，形成动画效果。在更新粒子时，可以添加一些物理效果，比如速度逐渐减小，或者让粒子朝鼠标方向移动，产生跟随效果。 颜色变化方面，可以根据时间或粒子属性动态改变，比如使用HSL颜色模式，随着时间变化色相值，实现渐变效果。 还需要处理粒子的生命周期，比如当粒子远离鼠标一定距离后移除，或者透明度降低到一定程度后重新初始化，保持粒子数量稳定。 可能遇到的问题包括性能优化，比如避免过多的粒子导致卡顿，或者Canvas绘制效率。需要测试合适的粒子数量，并确保在每一帧中只进行必要的绘制操作。 最后，应该提供一个完整的代码示例，让用户可以复制并运行，看到实际效果。同时，解释代码的关键部分，帮助用户理解实现原理，并能自行调整参数或样式。</think>我们通过HTML5 Canvas和JavaScript实现鼠标粒子效果。以下是分步讲解和完整代码： 一、HTML结构 ```html <!DOCTYPE html> <html> <head> <style> canvas { position: fixed; top: 0; left: 0; z-index: -1; } body { margin: 0; overflow: hidden; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html> ``` 二、JavaScript实现（script.js） ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); // 设置画布尺寸 function resize() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } window.addEventListener('resize', resize); resize(); // 粒子配置 const particles = []; const particleCount = 100; const mouse = { x: null, y: null }; // 鼠标移动监听 canvas.addEventListener('mousemove', e => { mouse.x = e.clientX; mouse.y = e.clientY; }); // 粒子类 class Particle { constructor() { this.reset(); } reset() { this.x = mouse.x || canvas.width/2; this.y = mouse.y || canvas.height/2; this.size = Math.random() * 5 + 1; this.speedX = Math.random() * 3 - 1.5; this.speedY = Math.random() * 3 - 1.5; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; } update() { this.x += this.speedX; this.y += this.speedY; if (this.distance > 100 || this.size < 0.3) { this.reset(); } this.size -= 0.1; } get distance() { return Math.hypot(mouse.x - this.x, mouse.y - this.y); } draw() { ctx.fillStyle = this.color; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fill(); } } // 初始化粒子 for (let i = 0; i < particleCount; i++) { particles.push(new Particle()); } // 动画循环 function animate() { ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(particle => { particle.update(); particle.draw(); }); requestAnimationFrame(animate); } animate(); ``` 三、关键功能说明： 1. Canvas自适应：通过监听resize事件，确保画布始终充满窗口 2. 粒子系统： - 使用粒子对象存储位置、速度、颜色等属性 - 动态颜色使用HSL色彩空间实现彩虹效果 3. 鼠标跟随： - 实时获取鼠标坐标 - 粒子生成后逐渐扩散并缩小 4. 动画优化： - 使用requestAnimationFrame实现流畅动画 - 半透明背景填充产生拖尾效果 - 自动回收旧粒子生成新粒子 四、自定义调整建议： 1. 修改particleCount调整粒子数量 2. 调整Math.random()的系数改变运动速度 3. 修改hsl参数实现不同颜色效果 4. 改变ctx.fillStyle的透明度值调整拖尾长度 这个实现包含完整的物理模拟和颜色渐变效果，粒子会跟随鼠标移动并产生彩虹拖尾效果。所有现代浏览器均可流畅运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值