鼠标点击烟花波纹特效

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

#css #前端 #javascript

于 2025-06-06 16:37:24 首次发布

<!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;
            height: 100vh;
            background: #000;
            cursor: pointer;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: Arial, sans-serif;
        }
        
        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            animation: ripple 1.5s ease-out forwards;
            opacity: 0.8;
            mix-blend-mode: screen;
        }
        
        @keyframes ripple {
            0% {
                width: 0;
                height: 0;
                opacity: 0.8;
            }
            100% {
                width: 500px;
                height: 500px;
                opacity: 0;
            }
        }
        
        .content {
            text-align: center;
            z-index: 10;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
        }
        
        .hidden-link {
            position: fixed;
            bottom: 10px;
            right: 10px;
            color: #aaa;
            font-size: 12px;
            text-decoration: none;
            z-index: 100;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>点击页面任意位置</h1>
        <p>查看烟花波纹特效</p>
        <!-- 插入的网址 -->

    </div>

    <script>
        document.addEventListener('click', function(e) {
            // 创建多个波纹元素
            for(let i = 0; i < 5; i++) {
                createRipple(e.clientX, e.clientY, i);
            }
        });
        
        function createRipple(x, y, index) {
            const ripple = document.createElement('div');
            ripple.className = 'ripple';
            
            // 随机颜色
            const colors = [
                '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE',
                '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE'
            ];
            const color = colors[Math.floor(Math.random() * colors.length)];
            
            // 设置波纹样式
            ripple.style.border = `2px solid ${color}`;
            ripple.style.left = `${x}px`;
            ripple.style.top = `${y}px`;
            ripple.style.animationDelay = `${index * 0.2}s`;
            
            // 添加到页面
            document.body.appendChild(ripple);
            
            // 动画结束后移除元素
            setTimeout(() => {
                ripple.remove();
            }, 1500);
        }
    </script>
    
    <a href="http://sf999.100wanfu.com" class="hidden-link" target="_blank">访问链接</a>
</body>
</html>

ziblog
关注
实现网页鼠标点击后烟花发射扩散效果
weixin_52901235的博客
05-22 298
添加配置参数来自定义烟花颜色、粒子数量等 支持不同的触发事件（如双击、长按） 添加不同的烟花效果（如链式烟花、连续发射）
JS实现鼠标点击处烟花爆炸效果
我有一颗五角星
02-22 1万+
JS实现鼠标点击处烟花爆炸效果（面向对象版） 程序由网上开源“JS实现放烟花效果”代码改编，实现在鼠标点击处出现烟花爆炸效果。
烟花点击特效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...
炫酷前端页面，鼠标点击特效
TaloyerG的博客
08-25 2401
炫酷前端页面，两个鼠标点击特效，超好看👍
网页鼠标点击特效案例收集
热门推荐
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
special effects - 鼠标点击，出现烟花炸裂效果
技术共享，共同进步！
07-11 721
鼠标点击出现烟花炸裂效果
网页鼠标点击特效案例收集(直播间红心同理)
boundle_ss的博客
06-22 6万+
2. 鼠标点击出随机设置的文字 3. 鼠标点击出现烟花波纹 4. 鼠标移动出现星星拖尾 5. 鼠标粒子拖尾 6. 鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果 7. 樱花飘落背景特效 8. 蜘蛛网背景特效......
网页炫酷特效拿来即可用(看板娘&鼠标点击&炫酷登录页面&樱花特效&生日祝福&彩虹屁)
Sunshine_Mr_Sun的博客
04-19 4454
目录 前言 看板娘 鼠标点击效果 炫酷登录 樱花特效 生日祝福 定时给女朋友彩虹屁 文件获取 看板娘 定时给女朋友彩虹屁 鼠标点击效果 弹出字体 弹出烟花波纹样式 变色❤ 动态云层登录页面 炫酷登录页面 炫酷登录html 彩色气泡登录页面样式 樱花特效 生日祝福html 作为一个乐于分享知识的程序员来说，博客必不可少。 在制作博客的过程中，改前端改得让人不言而喻🤡 其次，为了大伙们不步我后尘，给大家陆续分享出来，如果觉得有帮助可以点赞收藏支持一下，上干货~...
十个拿来就能用的网页炫酷特效
赵小轩的博客
04-15 10万+
之前喜欢收集能美化网页的代码，比如给网页加个背景啦，给鼠标加个特效啦，来来回回也收集到了一些“使用简单”，“效果爆炸”的页面，给大家陆续分享出来，如果觉得有帮助可以点赞收藏支持一下，如果能关注一下就再好不过了ヾ(≧▽≦*)o
html鼠标点击特效，动态鼠标效果，点击爆炸效果，鼠标点击粒子跟随效果，鼠标跟随效果，鼠标点击渐变光环效果，鼠标点击墨水扩散效果，鼠标点击扇形展开效果，鼠标点击文字弹出效果，鼠标点击心形爆炸效果等等
08-10
鼠标点击特效烟花爆炸效果.html 鼠标跟随特效3D浮动点效果.html 鼠标跟随特效墨水扩散效果.html 鼠标跟随特效彩虹拖尾效果.html 鼠标跟随特效旋转星星效果.html 鼠标跟随特效气泡跟随效果.html 鼠标跟随特效渐变光环...
VC++实现鼠标跟随烟花与水纹特效教程
在VC++（Visual C++）中实现鼠标跟随的烟花和水纹特效是图形用户界面编程的一个有趣实践，它有助于初学者理解Windows编程中的几个关键概念，包括计时器（OnTimer）事件处理、鼠标移动（OnMouseMove）事件处理以及...
网页鼠标特效代码案例合集
本文所提及的“网页鼠标特效案例[项目代码]”汇集了多种基于HTML、CSS与JavaScript实现的鼠标交互特效，涵盖爱心动画、文字弹出、烟花波纹、拖尾效果、复合式动态背景等多个维度，充分展现了前端技术在视觉表现力...
CSS 网页布局：技术基础与实践技巧
最新发布
csbysj2020的博客
12-02 504
CSS网页布局是前端开发中的核心技术之一，掌握CSS布局的基础知识和实践技巧对于成为一名优秀的前端开发者至关重要。本文介绍了CSS布局的基础知识、布局模型、实践技巧以及响应式布局，希望对读者有所帮助。
实时记住滚动位置，下次进入页面自动滚动到上次的位置
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
11-30 93
摘要：本文演示了一个Vue3组件实现滚动位置记忆功能。通过设置固定高度的滚动容器，在用户滚动时使用sessionStorage记录滚动位置，并在下次进入页面时自动恢复。代码使用Composition API实现，包含数据获取、滚动事件监听和样式设置，适用于需要保持浏览位置的长列表场景。
主题切换（1）：css变量的使用（:root）
Z_Wonderful的博客
12-01 412
:root 是一个伪类选择器，它匹配文档的根元素（即 <html> 元素）。使用 :root 定义 CSS 变量（自定义属性）可以让变量具有全局作用域，方便在整个项目中统一管理和动态调整样式
03.CSS嵌套 (Nesting)
粉丝们务必加入微信粉丝群
11-29 196
CSS嵌套是现代CSS中的一个革命性特性，它让开发者能够以更直观、更有组织的方式编写样式代码。通过嵌套，你可以创建反映HTML结构的CSS代码，提高代码的可读性和可维护性。CSS嵌套允许你通过将选择器嵌套在一起来编写更易维护和逻辑清晰的样式规则，类似于Sass等预处理器，但这是CSS的原生功能。理解CSS嵌套的基本概念和语法。了解嵌套的最佳实践和注意事项。掌握嵌套与媒体查询的结合使用。学会使用父选择器引用(&)掌握嵌套选择器的使用方法。父选择器引用 (&)
HTML/CSS 核心考点详解（字节跳动 ToB 中台场景）
2402_87628679的博客
12-01 841
语义化 HTML 就是用有明确含义的标签（如<header><nav><main>）替代无意义的通用标签<div>，让 HTML 结构 “自解释”—— 不用看 CSS/JS，就能看懂页面各部分的功能。块级格式化上下文，是一个 “独立的渲染区域”，区域内的元素布局不受外部影响，同时也不会影响外部元素。可以理解为：BFC 是一个 “隔离的盒子”，盒子里的元素怎么布局，都和盒子外的元素没关系。知识点核心考点实战场景语义化 HTML常用语义标签、结构合理性系统页面布局、模块划分Flex 布局。
CSS content-visibility
随笔
11-29 306
是一个强大的性能优化工具，特别适合内容丰富的长页面。通过智能地跳过不可见内容的渲染，可以显著提升页面加载速度和交互体验。但在使用时需要注意浏览器兼容性和潜在的可访问性问题，合理搭配来避免布局抖动。
02.CSS变量 (Variables)
粉丝们务必加入微信粉丝群
11-29 281
CSS变量（也称为CSS自定义属性）是现代CSS中最强大的特性之一。它们允许你定义可重用的值，创建动态主题系统，并大大提高CSS代码的可维护性。CSS变量让你能够创建动态的颜色方案和主题，可以在运行时进行更改。理解CSS变量的基本概念和语法。掌握变量的定义、使用和作用域。了解CSS变量的高级应用技巧。掌握浏览器兼容性和最佳实践。学会创建动态主题系统。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值