鼠标粒子拖尾特效

原创 已于 2025-06-27 13:28:25 修改 · 769 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #html

于 2025-06-06 16:44:41 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标粒子拖尾特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background: #121212;
            min-height: 100vh;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            cursor: none;
        }
        
        .container {
            position: relative;
            width: 100%;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
            color: white;
            text-align: center;
            padding: 20px;
        }
        
        h1 {
            font-size: 3rem;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #ff8a00, #e52e71, #00b4db);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 0 10px rgba(255,255,255,0.2);
        }
        
        p {
            font-size: 1.2rem;
            margin-bottom: 30px;
            max-width: 600px;
            line-height: 1.6;
            color: rgba(255,255,255,0.8);
        }
        
        .link-btn {
            display: inline-block;
            padding: 12px 30px;
            background: linear-gradient(45deg, #00b4db, #0083b0);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0,180,219,0.4);
            margin-top: 20px;
        }
        
        .link-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0,180,219,0.6);
        }
        
        .footer {
            position: fixed;
            bottom: 20px;
            width: 100%;
            text-align: center;
            color: rgba(255,255,255,0.5);
            font-size: 0.9rem;
            z-index: 10;
        }
        
        .footer a {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
        }
        
        .footer a:hover {
            color: white;
            text-decoration: underline;
        }
        
        /* 粒子样式 */
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%);
            mix-blend-mode: screen;
            transition: transform 0.1s ease-out;
        }
        
        /* 背景装饰粒子 */
        .bg-particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,0.05);
            animation: float 15s infinite linear;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) rotate(0deg);
            }
            100% {
                transform: translateY(-100vh) rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>鼠标粒子拖尾特效</h1>
        <p>移动鼠标查看彩色粒子跟随效果。每个粒子都有独特的颜色和大小，形成流畅的拖尾动画。</p>

    </div>
    
    <div class="footer">

    </div>

    <script>
        // 粒子系统
        class ParticleSystem {
            constructor() {
                this.particles = [];
                this.particleCount = 30; // 拖尾粒子数量
                this.mouseX = window.innerWidth / 2;
                this.mouseY = window.innerHeight / 2;
                this.init();
            }
            
            init() {
                // 创建背景粒子
                this.createBackgroundParticles();
                
                // 创建拖尾粒子
                for (let i = 0; i < this.particleCount; i++) {
                    this.createParticle(i);
                }
                
                // 监听鼠标移动
                document.addEventListener('mousemove', (e) => {
                    this.mouseX = e.clientX;
                    this.mouseY = e.clientY;
                });
                
                // 开始动画
                this.animate();
            }
            
            createBackgroundParticles() {
                const particleCount = 30;
                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('bg-particle');
                    
                    // 随机大小
                    const size = Math.random() * 10 + 5;
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    
                    // 随机位置
                    particle.style.left = `${Math.random() * 100}%`;
                    particle.style.top = `${Math.random() * 100 + 100}%`;
                    
                    // 随机动画
                    particle.style.animationDuration = `${Math.random() * 10 + 10}s`;
                    particle.style.animationDelay = `${Math.random() * 5}s`;
                    
                    document.body.appendChild(particle);
                }
            }
            
            createParticle(index) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                document.body.appendChild(particle);
                
                this.particles.push({
                    element: particle,
                    x: this.mouseX,
                    y: this.mouseY,
                    size: Math.random() * 15 + 5,
                    color: this.getRandomColor(),
                    delay: index * 0.03,
                    speed: Math.random() * 0.2 + 0.05
                });
            }
            
            getRandomColor() {
                const hue = Math.floor(Math.random() * 360);
                return `hsl(${hue}, 100%, 70%)`;
            }
            
            animate() {
                this.particles.forEach((particle, index) => {
                    // 计算延迟因子
                    const delayFactor = 1 - (particle.delay * 2);
                    
                    // 计算目标位置
                    const targetX = this.mouseX;
                    const targetY = this.mouseY;
                    
                    // 更新粒子位置（带有延迟效果）
                    particle.x += (targetX - particle.x) * particle.speed * delayFactor;
                    particle.y += (targetY - particle.y) * particle.speed * delayFactor;
                    
                    // 更新粒子样式
                    particle.element.style.left = `${particle.x}px`;
                    particle.element.style.top = `${particle.y}px`;
                    particle.element.style.width = `${particle.size * delayFactor}px`;
                    particle.element.style.height = `${particle.size * delayFactor}px`;
                    particle.element.style.backgroundColor = particle.color;
                    particle.element.style.opacity = delayFactor * 0.8;
                    particle.element.style.filter = `blur(${2 * (1 - delayFactor)}px)`;
                });
                
                requestAnimationFrame(() => this.animate());
            }
        }
        
        // 初始化粒子系统
        window.addEventListener('load', () => {
            new ParticleSystem();
        });
    </script>
</body>
</html>

ziblog
关注
一个鼠标拖影、拖尾Flash效果源文件.rar
07-10
一个简单的Flash鼠标拖影效果，也就是晃去鼠标，会留下鼠标的轨迹，类似于拖尾效果，拖着长长的尾巴，是一种比较常见的Flash鼠标特效，自带有源文件，在Flash8下可打开重新修改源文件。
超级炫酷的鼠标拖尾特效
02-28
超级炫酷的鼠标拖尾特效exe文件
JS-鼠标彩色拖尾小效果
xing.org1^
05-02 382
实现步骤解析： * 这原本就是一个鼠标后面跟随一串小方块的效果， * 后来我就想，运用之前学的随机数的案例把小方块的颜色做成彩色的， * 并且每一个小方块的色彩是随机分配而不是我自己手动填写的。 1 function getColor(){ 2 var oMath = Math.floor(Math.random()*255);...
使用css和js实现鼠标拖尾特效
weixin_43941291的博客
07-15 7022
<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> <
Mac - 鼠标拖尾特效 By CursorEffect2
BITDDD小栈
06-02 2578
MAC 光标特效软件 CursorEffect2 使用。
精选资源
js配合Canvas实现拖尾特效.zip
09-29
这个"js配合Canvas实现拖尾特效.zip"文件显然包含了如何利用JavaScript和Canvas API来创建一种独特的视觉效果——拖尾特效。拖尾特效通常用于游戏、艺术展示或者用户交互界面，为用户提供一种动态且引人入胜的体验。...
HTML5鼠标移动光束粒子动画特效.zip
07-05
在这个特效中，JavaScript监听鼠标的移动事件，然后根据鼠标的位置更新粒子的位置和行为，实现粒子随着鼠标移动而变化的效果。 动画的实现通常涉及到时间帧的处理。开发者可能使用requestAnimationFrame函数来创建...
精选资源
jQuery鼠标点击弹出粒子效果动画特效代码
03-20
本篇文章将深入探讨一个基于jQuery实现的名为"clickspark"的粒子特效插件，它能够实现在鼠标点击时触发炫酷的粒子动画效果。 jQuery，作为一个轻量级的JavaScript库，以其简洁的API和广泛的社区支持，成为了前端...
精选资源
HTML5 Canvas粒子上升动画特效
06-24
6. **交互性**：如果需要，还可以添加鼠标交互，比如鼠标移动时粒子跟随，或者点击产生新的粒子等。 在这个“HTML5 Canvas粒子上升动画特效”的实现中，你可能会遇到性能问题，特别是在粒子数量较大时。为了优化，...
jquery+css实现鼠标滑动彩虹圈特效
08-12
NULL 博文链接：https://qq-24665727.iteye.com/blog/2283320
鼠标移动粒子光标动画特效
11-29
个人找了比较久，较为满一个的可以跟随鼠标移动的小尾巴特效
跟鼠标移动的流星
08-05
用JQuary写的，随鼠标移动的流星，非常漂亮，可以学习一下
js 特效 html 特效 随鼠标的彩色字符
09-03
js 特效 html 特效 随鼠标的彩色字符 js 特效 html 特效 随鼠标的彩色字符
鼠标拖尾特效
ning的博客
02-04 3360
鼠标拖尾特效是一种简单而有趣的前端交互效果，通过监听鼠标事件和动态生成元素即可实现。你可以根据需求调整样式和逻辑，使其更符合你的设计需求。版权声明：本博客内容为原创，转载请保留原文链接及作者信息。参考文章前端开发 之 12个鼠标交互特效上【附完整源码】鼠标特效。
鼠标跟随特效
神以灵的博客
03-31 5345
今天访问stack-overflow看到了愚人节的彩蛋，感觉这个鼠标跟随特效很好玩，就把源码拔了下来~~ 这是它的codepen地址 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w...
javascript鼠标拖尾特效
weixin_45851686的博客
09-14 1193
鼠标特效需要使用定时器setTimeout在固定时间生成节点，删除节点，生成的节点赋予随机的宽高，随机颜色，使每个特效节点都看起来不一样 注意：生成的节点需要设置绝对定位，使其脱离文档流，不影响页面中其他元素的位置 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" co
使用css和js实现鼠标拖尾特效（七彩泡泡）
weixin_43941291的博客
07-21 4488
一 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
vue前端鼠标拖尾特效
最新发布
03-12
### 实现鼠标拖尾特效 为了在 Vue.js 中实现鼠标拖尾特效，可以借鉴基于 Canvas 的方法来创建动态视觉效果。Canvas 提供了一个强大的绘图环境，在其中可以通过 JavaScript 控制绘制路径、颜色以及其他图形属性。 下面是一个简单的例子，展示了如何利用 HTML5 `<canvas>` 和 JavaScript 来制作一个跟随鼠标的彗星拖尾效果[^3]： ```html <template> <div id="app"> <!-- 定义 canvas --> <canvas ref="trailCanvas"></canvas> </div> </template> <script> export default { mounted() { const canvas = this.$refs.trailCanvas; let ctx, w, h; function initCanvas() { // 设置画布大小等于窗口尺寸 w = window.innerWidth; h = window.innerHeight; canvas.width = w; canvas.height = h; // 获取上下文并设置样式 ctx = canvas.getContext(&#39;2d&#39;); ctx.strokeStyle = &#39;#fff&#39;; ctx.lineWidth = 1.5; ctx.lineCap = &#39;round&#39;; // 初始化粒子数组 particlesArray = []; } class Particle { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 1 + 0.5; this.speedX = (Math.random() - 0.5) * 2; this.speedY = (Math.random() - 0.5) * 2; this.alpha = 1; } update() { this.x += this.speedX; this.y += this.speedY; if(this.size > 0.2)this.size -= 0.05; if(this.alpha > 0.05)this.alpha -= 0.01; } draw() { if(this.alpha <= 0){ return; }else{ ctx.globalAlpha = this.alpha; ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI*2); ctx.closePath(); ctx.fill(); } } } let mouse = {x: null, y: null}; document.addEventListener(&#39;mousemove&#39;, event => { mouse.x = event.x; mouse.y = event.y; createParticles(mouse.x, mouse.y); }); function createParticles(x, y) { for(let i = 0; i < 5; i++){ particlesArray.push(new Particle(x,y)); } } function animate(){ requestAnimationFrame(animate); ctx.clearRect(0, 0, w, h); for(const particle of particlesArray){ particle.update(); particle.draw(); } } initCanvas(); animate(); window.onresize = () => { initCanvas(); }; }, } </script> <style scoped> #app { position: relative; } canvas { display:block; background-color:#000; } </style> ``` 此代码片段定义了一种方式来响应用户的鼠标移动事件，并通过 `Particle` 类模拟多个微粒的行为，这些微粒会逐渐消失形成拖尾效应。每当检测到新的鼠标位置时就会生成一批新粒子，它们会在屏幕上短暂存在一段时间后慢慢淡出视野。 #### 注意事项 - 上述示例适用于现代浏览器支持的场景；对于旧版IE可能需要额外处理。 - 如果页面中有其他交互元素，则需考虑调整 z-index 或者采取措施防止遮挡重要操作区域。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值