点击烟花波纹效果

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

#javascript #开发语言 #ecmascript

于 2025-05-21 16:46:40 首次发布

<!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>
        body {
            margin: 0;
            padding: 0;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            cursor: pointer;
            background-color: #121212;
            font-family: Arial, sans-serif;
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            transform: scale(0);
            pointer-events: none;
            animation: ripple 1s ease-out;
        }
        
        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            animation: particle 1s ease-out forwards;
        }
        
        @keyframes ripple {
            to {
                transform: scale(3);
                opacity: 0;
            }
        }
        
        @keyframes particle {
            0% {
                transform: translate(0, 0);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty));
                opacity: 0;
            }
        }
        
        .footer {
            position: fixed;
            bottom: 15px;
            width: 100%;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            z-index: 100;
        }
        
        .footer a {
            color: #ff9800;
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer a:hover {
            color: #ff5722;
            text-decoration: underline;
        }
    </style>
</head>
<body>
 

    <script>
        document.addEventListener('click', function(e) {
            createRipple(e.clientX, e.clientY);
            createParticles(e.clientX, e.clientY); // 修复了函数名拼写错误
        });
        
        function createRipple(x, y) {
            const ripple = document.createElement('div');
            ripple.className = 'ripple';
            
            // 随机颜色
            const hue = Math.floor(Math.random() * 360);
            ripple.style.background = `hsla(${hue}, 100%, 70%, 0.6)`;
            
            ripple.style.left = (x - 20) + 'px';
            ripple.style.top = (y - 20) + 'px';
            ripple.style.width = '40px';
            ripple.style.height = '40px';
            
            document.body.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 1000);
        }
        
        function createParticles(x, y) { // 修复了函数名拼写错误
            const particleCount = 30;
            const angleIncrement = (Math.PI * 2) / particleCount;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // 随机大小
                const size = Math.random() * 8 + 4;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机颜色
                const hue = (Math.floor(Math.random() * 60) + (i % 2 === 0 ? 0 : 180));
                particle.style.background = `hsl(${hue}, 100%, 70%)`;
                
                // 计算粒子运动方向
                const angle = angleIncrement * i;
                const distance = Math.random() * 100 + 50;
                const tx = Math.cos(angle) * distance;
                const ty = Math.sin(angle) * distance;
                
                particle.style.setProperty('--tx', `${tx}px`);
                particle.style.setProperty('--ty', `${ty}px`);
                
                particle.style.left = (x - size/2) + 'px';
                particle.style.top = (y - size/2) + 'px';
                
                document.body.appendChild(particle);
                
                setTimeout(() => {
                    particle.remove();
                }, 1000);
            }
        }
    </script>
</body>
</html>

ziblog
关注
special effects - 鼠标点击，出现烟花炸裂效果
技术共享，共同进步！
07-11 720
鼠标点击出现烟花炸裂效果
使用原生JS实现烟花效果
weixin_42272688的博客
09-08 1113
原生JS实现烟花效果，点击页面生成烟花，向四周扩散，然后再坠落下去。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190908213857677.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dl...
鼠标点击烟花波纹特效
zichenblog的博客
06-06 256
鼠标点击烟花波纹特效查看烟花波纹特效
烟花点击特效php代码,js实现点击烟花特效
weixin_39963287的博客
03-25 417
代码：function clickEffect() {let balls = [];let longPressed = false;let longPress;let multiplier = 0;let width, height;let origin;let normal;let ctx;const colours = ["#F73859", "#14FFEC", "#00E0FF", "#F...
原生JS实现网页烟花动画效果——前端工程师必备技能！
李帅醒的博客
11-12 2万+
原生js实现放烟花效果，点击鼠标，然后向四周扩散，最后自由落体效果！最简单的方法实现！
炫酷前端页面，鼠标点击特效
TaloyerG的博客
08-25 2400
炫酷前端页面，两个鼠标点击特效，超好看👍
网页鼠标点击特效案例收集
热门推荐
ungoing的博客
05-31 15万+
1. 鼠标点击出随机颜色的爱心 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body&gt
Cocos2d-x能够实现的效果总结
巴黎的妖
08-17 718
动作（Actions） move移动：moveto/moveby 从一个位置移动到另外一个位置 从一个位置移动多少数量级 rotate旋转：rotateto/rotateby 从一个角度旋转到另外一个角度 旋转多少个数量级 scale缩放：scaleto/scaleby 放大缩小到什么程度 skew倾斜：skewto/skewby 倾斜到什么程度 rotationalskew旋转着倾斜:
纯JavaScript实现鼠标拖尾效果
Chanyto的博客
08-20 1728
鼠标拖尾在浏览器上实现，是一种非常有趣，且简单的实现。它作为js编译出来的功能，极好的加深了用户与页面之间的交互性，提高了用户体验。是一种简单的功能实现，书写难度低，非常适合萌新小白作为前端入门练习的首选之一。通过这种方法，我们可以实现不同的效果，不光是鼠标拖尾效果，甚至是烟花样的点击效果，或者说是波纹样的点击效果...都是可以实现的。
html鼠标点击特效，动态鼠标效果，点击爆炸效果，鼠标点击粒子跟随效果，鼠标跟随效果，鼠标点击渐变光环效果，鼠标点击墨水扩散效果，鼠标点击扇形展开效果，鼠标点击文字弹出效果，鼠标点击心形爆炸效果等等
08-10
鼠标点击特效烟花爆炸效果.html 鼠标跟随特效3D浮动点效果.html 鼠标跟随特效墨水扩散效果.html 鼠标跟随特效彩虹拖尾效果.html 鼠标跟随特效旋转星星效果.html 鼠标跟随特效气泡跟随效果.html 鼠标跟随特效渐变光环...
js特效 效果 集合
05-05
6. **喷泉效果**：类似水花四溅或烟花绽放的视觉效果，喷泉效果可以给网页增加动感。通过定时器控制粒子的发射，配合CSS动画实现粒子的上升、扩散和消失，可以营造出各种动态的喷泉场景。 7. **金鱼效果**：此效果...
Next.js 零基础开发博客后台管理系统教程（一）：环境搭建与项目初始化
祈澈菇凉
12-02 540
✅ 确定了使用 Next.js 的理由。✅ 检查并准备了开发环境。✅ 初始化了一个基于 App Router 和 TypeScript 的 Next.js 项目。✅ 初步了解了项目结构并成功运行了应用。在下一篇教程中，我们将开始构建后台管理界面的基础布局，并集成一个常用的 UI 组件库（例如 Ant Design 或继续使用 Tailwind CSS），为我们的管理系统打造一个漂亮、实用的侧边栏和顶部导航栏。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 349
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
基于Springboot2+Vue2的旅游景点购票系统
自学网站s.jf3q.com,菜鸟的成长之路
12-02 439
本系统是一个集旅游景点信息展示、在线购票、用户游记分享与互动交流于一体的综合性平台。核心价值在于提供便捷的景点门票预订服务，同时构建活跃的旅游社区，促进用户间的经验分享。
【免费云平台部署指南】按场景选型+全维度对比（附直达地址）
最新发布
分享技术干货，聚焦AI前沿科技
12-03 545
免费云平台已能覆盖从静态网站到AI模型部署的大部分场景，核心是根据项目类型（静态/后端/AI）、访问地区（国内/国外）和功能需求（数据库/容器/GPU）选择适配平台。新手建议从简单场景入手（如GitHub Pages部署博客、Hugging Face Spaces部署AI Demo），熟悉后再尝试全栈或容器化部署。
js考古之seajs.use、layui.use是啥 以及来源？
weixin_52236586的博客
11-29 494
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。
医院随访管理系统源码 患者随访管理系统源码 智能随访系统源码 出院随访系统源码，基于Java+Vue前后端分离架构
爱笑的源码博客
11-29 411
摘要：医院随访管理系统是一款基于Java+Vue前后端分离架构开发的智能平台，集成了患者信息管理、随访计划设定、自动提醒等功能。系统支持个性化随访计划制定（按病种/药品/患者分类）、内置丰富的随访知识库和问卷模板，提供本地电话接入和录音功能。通过自动推送提醒、多形式随访记录、审核管理和数据分析等功能，有效提升诊后随访效率和质量，为临床治疗优化和药品疗效评估提供数据支持。系统采用Springboot+MySQL技术栈，实现医院随访工作的规范化、智能化管理。
养老保险|智慧养老|基于springboot+vue养老保险系统设计与实现(源码+数据库+文档)
伟庭的博客
11-30 798
【摘要】本文介绍了一个基于SpringBoot+Vue的智慧社区养老系统开发项目。针对传统社区养老管理效率低下的问题，系统实现了公告管理、健康档案、养老政策等核心功能模块。采用Java技术栈开发，包含项目管理、养老政策管理、公告管理等后台管理界面，并展示了实体ER图与核心代码片段。系统旨在提升社区养老服务的信息化水平，为老年人提供便捷的健康管理服务。项目适合作为计算机专业毕业设计选题，文末提供了源码获取方式。
Vue3 新的组件
洋葱的博客
11-30 187
什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。1、等待异步组件时渲染一些额外内容，让应用有更好的用户体验。在Vue2中：组件必须有一个根标签。好处：减小标签层级，减小内存占用。一、Fragment。二、Teleport。三、Suspense。
安卓水下气泡上升动画效果实现源码
安卓动画效果中的“水下气泡上升界面效果”是一...通过对BubbleLayout源码的剖析，可以系统学习到如何构建一个高效、流畅且美观的动态用户界面，进而迁移到诸如粒子系统、飘雪效果、烟花绽放等更多创意动效的开发中去。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值