CSS3按钮爆炸特效

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

#css #css3 #前端

于 2025-06-11 14:38:49 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3按钮爆炸特效</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f0f0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        .container {
            text-align: center;
            position: relative;
        }

        .title {
            font-size: 2.5em;
            color: #333;
            margin-bottom: 50px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .explode-btn {
            position: relative;
            padding: 15px 40px;
            font-size: 1.2em;
            background: linear-gradient(45deg, #FF416C, #FF4B2B);
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            outline: none;
            box-shadow: 0 5px 15px rgba(255, 75, 43, 0.4);
            transition: all 0.3s;
            overflow: hidden;
            z-index: 1;
        }

        .explode-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 75, 43, 0.6);
        }

        .explode-btn:active {
            transform: translateY(1px);
        }

        .explode-btn.clicked {
            animation: btnShrink 0.5s forwards;
        }

        .particles {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            pointer-events: none;
            z-index: 2;
        }

        .link {
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 100%;
            text-align: center;
        }

        .link a {
            color: #FF416C;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 15px;
            border-radius: 20px;
            transition: all 0.3s;
        }

        .link a:hover {
            background: rgba(255, 65, 108, 0.1);
        }

        @keyframes btnShrink {
            0% {
                transform: scale(1);
                opacity: 1;
            }
            100% {
                transform: scale(0);
                opacity: 0;
            }
        }

        @keyframes particleFly {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translate(var(--tx), var(--ty)) scale(0);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="title">点击按钮看爆炸效果</h1>
        <button class="explode-btn" id="explodeBtn">点击爆炸</button>
        
        <div class="link">
         
        </div>
    </div>

    <script>
        document.getElementById('explodeBtn').addEventListener('click', function(e) {
            const btn = e.target;
            btn.classList.add('clicked');
            
            // 创建爆炸粒子
            createParticles(btn);
            
            // 重置按钮状态
            setTimeout(() => {
                btn.classList.remove('clicked');
            }, 500);
        });

        function createParticles(btn) {
            const btnRect = btn.getBoundingClientRect();
            const centerX = btnRect.left + btnRect.width / 2;
            const centerY = btnRect.top + btnRect.height / 2;
            
            // 创建30个粒子
            for (let i = 0; i < 30; i++) {
                const particle = document.createElement('div');
                particle.className = 'particles';
                
                // 随机颜色
                const hue = Math.floor(Math.random() * 60) + 10; // 10-70红色到橙色
                particle.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
                
                // 随机大小
                const size = Math.random() * 10 + 5;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                
                // 随机位置
                const angle = Math.random() * Math.PI * 2;
                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 = `${centerX}px`;
                particle.style.top = `${centerY}px`;
                
                // 动画
                particle.style.animation = `particleFly 0.8s ease-out forwards`;
                
                document.body.appendChild(particle);
                
                // 动画结束后移除粒子
                setTimeout(() => {
                    particle.remove();
                }, 800);
            }
        }
    </script>
</body>
</html>

ziblog
关注
CSS3点击按钮爆炸动画特效
06-24
CSS3点击按钮爆炸动画特效是一款基于HTML5+CSS3实现的粉碎爆炸动画特效。
css爆炸式操作
月光疾风
08-13 1082
本文介绍有关css的一些技巧以及一些比较另类的用法，有些情景完全可以避开使用Javascript，单纯的css就可以完美实现 更新日志 2018-08-10 修改基础的 9.禁用鼠标事件、移动端禁止图片长按保存功能 新增基础的 20.横竖屏匹配 新增基础的 21.硬件加速 新增基础的 22.移动端屏幕旋转时，字体大小不改变 新增基础的 23.Animation动画结束时，保持该状态不...
css3 爆炸效果
pegmca的博客
01-15 1390
//爆炸效果 @keyframes fireworks { 0% { transform: scale(0, 0); } 60% { transform: scale(1, 1); opacity: 1; } 95%{ transform: scale(0.9, 0.9); } 100%{ transform: scale(0.9, 0.9); opacity: 0; } } //爆炸图绑定动画 animation: fire
纯CSS打气球爆炸js特效
ICode联盟
07-11 510
下载地址纯CSS打气球爆炸特效，没有使用任何JavaScript代码，可以打破气球的网页特效。dd:
基于CSS3和GSAP的超酷盒子爆炸动画特效
07-06
基于CSS3和GSAP的超酷盒子爆炸动画特效
CSS3点击按钮爆炸动画特效.zip
10-10
非常实用的特效代码，可以完美运行，可以二次修改！
基于CSS3+canvas实现的按钮粒子爆炸特效源码.zip
11-09
这个"基于CSS3+canvas实现的按钮粒子爆炸特效源码.zip"文件提供了一种创新的方法来提升网页交互的趣味性和吸引力。接下来，我们将深入探讨CSS3和Canvas技术以及如何结合它们创建粒子爆炸特效。 **CSS3** 是 ...
CSS3点击按钮爆炸特效
最新发布
zichenblog的博客
06-10 861
title>CSS3点击按钮爆炸特效</title>// 随机位置和运动方向。// 创建30个粒子。/* 重新出现动画 *//* 按钮样式 *//* 爆炸粒子 *//* 爆炸动画 *//* 底部链接 */
jQuery/CSS3鼠标点击爆炸效果
08-23
这次要分享的这款效果看起来和HTML5有关，但是遗憾的是它是用jQuery和CSS3实现的鼠标点击爆炸效果，主要还是用jQuery实现，爆炸物的倾斜效果是利用CSS3实现的。当我们点击鼠标时，页面上的图片就会分裂成多张图片，就像爆炸一样。
基于HTML+CSS动画的魔方爆炸效果
09-28
基于HTML+CSS的魔方动画爆炸效果，将魔方的每个块都实现相应的移动效果，并组成笑脸，最后又重新恢复原样，期待大家的评论
jquery+css3点击爆炸块效果
06-12
一个代码简洁，效果明显的jquery+css3特效 点击div块状，会自动破碎并散落到网页底部 使用方法： 1、将lanrenzhijia.css文件复制到网页head中 2、将三个js代码也复制到网页head中 3、将html代码复制到你需要的地方即可搞定
CSS3 烟花升空爆炸炫丽动画效果源码.rar
07-10
由html5 CSS3 jquery生成的烟花动画效果，烟花升空爆炸炫丽动画源码，烟花的数量、大孝高度都随机，且烟花散开的效果五颜六色，很漂亮噢。烟花爆炸一瞬间的动画效果很逼真，很自然，全屏查看效果，更棒。 　　代码中调用了一个jquery插件jquery.fireworks来实现烟花效果，在HTML5的支持下，插件的最终效果十分令人满意。
css3爆炸轮播效果
weixin_30367543的博客
05-07 379
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>爆炸效果轮播</title> <style> *{ margin:0; padding:0; ...
利用CSS3动画实现立方体旋转爆炸效果
cm200225的博客
02-20 689
HTML代码如下 <body> <div class="wrap"> <div class="cube"> <div class="front margin"> 外-前 </div> <div class="back margin"> 外-后 </div>
css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果
蒲公英芽的博客
05-20 6118
一、业务背景： 最近接了一个“扎水球”的小程序项目，用户使用“金针”扎破水球，可以扎到奖励，或者扎到炸弹，其实也可以看作是一次抽奖，扎破水球后，显示对应的奖励。关于页面样式及扎水球后的结果，UI同学给了下面两张图： 经过我的一番“添油加醋”后，做出的效果是下面这样的，感谢UI同学，给了我自由发挥的空间，让我又提起“笔”，写了这篇博客。 css3 抽奖实现炸弹爆炸效果 卡片翻转效果 雪花效果
3D旋转立方体爆炸展开动画特效纯CSS3源码
weixin_35639680的博客
08-28 1388
本文还有配套的精品资源，点击获取 简介：本资源展示了如何仅用CSS3技术创建一个炫酷的3D旋转立方体动画特效，此特效适用于动态网页设计，提供强烈的视觉冲击。该特效实现涵盖了CSS3 3D变换、立方体结构、3D转换矩阵、 perspective 属性、动画与过渡、HTML和CSS结构设计以及兼容性与性能优化等方面。特效可用于网页加载指示器、交互式按钮等多种场景，...
图片碎片html css,扑面而来的碎片图片3D炸裂效果初体验_html/css_WEB-ITnose
weixin_32075603的博客
06-04 617
之前逛园子的时候看到 ChokCoco 的爆炸效果作品：【BOOM】一款有趣的Javascript动画效果 (大神英文有没有拼错呀←.←)，觉得蛮有意思的，效果如下：不过觉得这个爆炸效果还是偏软了一点，没有爆炸那种碎片飞溅的感觉，一直念念不忘想要自己做一个3D效果的爆炸动效。这两天在搞一些小动画，就顺便也把3D爆炸做了出来，动画效果：实现原理很简单，就是用很多小图片拼凑成大图片，然后让小图片按照一...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值