`

点击爆炸特效

阅读更多

点击瞬间爆炸~

用jQuery做的可以作为动画提示框的爆炸效果~~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>爆炸</title>
    <style type="text/css">
        /*CSS源代码*/
        body {
            margin: 0;
            padding: 0;
            background: #f0fcff;
            font-family: 'adelle-sans', sans-serif;
            overflow: hidden;
            height: 100%;
        }

        .container {
            width: 400px;
            top: 100px;
            position: relative;
            margin: 0px auto;
        }

        .clipped-box {
            cursor: pointer;
            -webkit-transition: top 1.2s linear;
            transition: top 1.2s linear;
        }
        .clipped-box div {
            z-index: 9999999;
            color: #fff;
            font-size: 1em;
            padding: 40% 20px;
            text-align: center;
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            background: #4F9CC7;
        }

        .clipped-box div h1 {
            text-shadow: 2px 2px rgba(0,0,0,0.2);
        }


        .clipped-box, .clipped-box div {
            width: 400px;
            height: 400px;
            position: relative;
        }

        .clipped-box div {
            position: absolute;
            top: auto;
            left: 0;
            background: #4F9CC7;
            -webkit-transition: -webkit-transform 1.4s ease-in, background 0.3s ease-in;
            transition: transform 1.4s ease-in, background 0.3s ease-in;
        }


    </style>
</head>
<body>
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
    <div class="clipped-box">

        <div class="content">
            <h1>点我就爆炸给你看~</h1>
            <h3>炸了一个我,还有千千万万个我!</h3>
        </div>

    </div>
</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" 
       src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
<script>
    /*Javascript代码片段*/
    $(document).ready(function() {

        // 产生碎片. 这个示例中我用了5片,你也可以用25片:-)
        (genClips = function() {

            // 为了便于使用
            $t = $('.clipped-box');

            // 就像我刚才说的,我使用五个碎片
            var amount = 5;

            // 德得到每个长方形碎片的宽度
            var width = $t.width() / amount;
            var height = $t.height() / amount;

            // 总和是正方形块的数量
            var totalSquares = Math.pow(amount, 2);

            // 生成HTML内容
            var html = $t.find('.content').html();

            var y = 0;

            for(var z = 0; z <= (amount*width); z = z+width) {

                $('<div class="clipped" 
                             style="clip: rect('+y+'px, '+(z+width)+'px,
                    '+(y+height)+'px, '+z+'px)">'+html+'</div>').appendTo($t);
                if(z === (amount*width)-width) {
                    y = y + height;
                    z = -width;
                }
                if(y === (amount*height)) {
                    z = 9999999;
                }

            }

        })();

        // 快速选择随机数量的块
        function rand(min, max) {

            return Math.floor(Math.random() * (max - min + 1)) + min;

        }

        // 检查动画即将结束时的变量
        var first = false,
                clicked = false;

        // 点击事件
        $('.clipped-box div').on('click', function() {

            if(clicked === false) {

                clicked = true;

                $('.clipped-box .content').css({'display' : 'none'});

                // 应用到每个大正方形块
                $('.clipped-box div:not(.content)').each(function() {

                    // 这个小块的输入介意 90m/s and 120m/s的随机数.,看起来好像很多的样子
                    // 但是有时候它看起来会比较慢,不信你试试=_=. 
                //这个取决于我设置timeout的时间.
                    var v = rand(120, 90),
                            angle = rand(80, 89),
                            theta = (angle * Math.PI) / 180,
                            g = -9.8;


                    var self = $(this);

                    var t = 0,
                            z, r, nx, ny,
                            totalt =  15;


                    var negate = [1, -1, 0],
                            direction = negate[ Math.floor(Math.random() * negate.length) ];


                    var randDeg = rand(-5, 10),
                            randScale = rand(0.9, 1.1),
                            randDeg2 = rand(30, 5);


                    var color = $(this).css('backgroundColor').split('rgb(')[1].split(')')[0].split(', '),
                            colorR = rand(-20, 20),
                            colorGB = rand(-20, 20),
                            newColor = 'rgb('+(parseFloat(color[0])+colorR)+', '+(parseFloat(color[1])+colorGB)+', '+(parseFloat(color[2])+colorGB)+')';



                    $(this).css({
                        'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)',
                        'background' : newColor
                    });


                    z = setInterval(function() {


                        var ux = ( Math.cos(theta) * v ) * direction;


                        var uy = ( Math.sin(theta) * v ) - ( (-g) * t);


                        nx = (ux * t);


                        ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));


                        $(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});


                        t = t + 0.10;


                        if(t > totalt) {

                            clicked = false;
                            first = true;


                            $('.clipped-box').css({'top' : '-1000px', 'transition' : 'none'});
                            $(self).css({'left' : '0', 'bottom' : '0', 'opacity' : '1', 'transition' : 'none', 'transform' : 'none'});



                            clearInterval(z);

                        }

                    }, 10);

                });

            }

        });



        r = setInterval(function() {



            if(first === true) {

                $('.clipped-box').css({'top' : '0', 'transition' : ''});
                $('.clipped-box div').css({'opacity' : '1', 'transition' : '', 'background-color' : ''});

                $('.content').css({'display' : 'block'});

                first = false;

            }

        }, 300);
    });

</script>
</body>
</html>

 

 

 

.

分享到:
评论

相关推荐

    jQuery点击图片爆炸特效.zip

    《jQuery点击图片爆炸特效——构建动态视觉体验》 在当今的网页设计中,动态效果的运用已经成为提升用户体验的重要手段。其中,“jQuery点击图片爆炸特效”就是一种独特且引人注目的交互式设计,它能够为用户带来...

    html5 canvas实现的鼠标点击水珠爆炸动画特效源码.zip

    这是一款基于html5 canvas实现的鼠标点击水珠爆炸动画特效源码,鼠标点击界面可出现水珠的四散爆炸动画效果,该源码没有引入任何外部图形元素,且动画效果逼真流畅,是一款非常经典的HTML5动画源码,建议使用支持...

    cocos2d-x 初级粒子爆炸特效

    为了触发爆炸特效,你可能需要在一个特定的事件(如点击、碰撞)发生时调用这个粒子系统。你可以利用Cocos2d-x的事件监听器机制来实现这一功能。 总的来说,"cocos2d-x 初级粒子爆炸特效"项目涵盖了Cocos2d-x游戏...

    好玩的鼠标页面点击爆破效果js特效代码.zip

    当用户在网页的空白区域点击鼠标时,特效会模拟一个爆炸效果。这个效果通常通过改变元素的位置、大小或者颜色来实现,营造出视觉冲击力。在这个例子中,我们将使用HTML、CSS和JavaScript来共同完成这个任务。 HTML...

    HTML5点击盒子爆炸动画特效

    在这个特效中,当用户点击一个弹跳的盒子时,盒子会瞬间“爆炸”,化作一片烟雾,随后在烟雾中逐渐显现出一个SVG Logo,整个过程流畅而生动。 首先,我们来详细了解一下这个特效中的主要技术组件: 1. HTML(超...

    鼠标点击后散开的flash打散特效.rar

    鼠标点击后散开的flash打散特效,像一个水滴一样,点击后水滴会炸开,然后再急速汇成一个水滴,有意思的鼠标点击效果,散开再聚合。

    jQuery/CSS3鼠标点击爆炸效果

    解压密码:RJ4587 这次要分享的这款效果看起来和HTML5有关,但是遗憾的是它是用jQuery和CSS3实现的鼠标点击爆炸效果,主要还是用jQuery实现,爆炸物的倾斜效果是利用CSS3实现的。当我们点击鼠标时,页面上的图片就会...

    基于three.js的3D爆炸特效

    当触发爆炸特效时,模型会被分解成多个碎片,模拟出真实的爆炸效果。 "src"文件夹可能包含了项目的源代码,包括JavaScript文件,其中包含了three.js的场景设置、对象创建、动画控制等关键逻辑。开发者可能使用了...

    用jQuery和CSS3实现的鼠标点击爆炸效果,主要还是用jQuery实现,爆炸物的倾斜效果是利用CSS3实现的.zip

    综上所述,这个项目融合了jQuery的事件处理和动画功能,以及CSS3的变换和过渡效果,创造了一个引人注目的鼠标点击爆炸特效。这种技术的运用能够提升网站的互动性和趣味性,吸引用户更长时间地停留在页面上。对于...

    html5 svg打开盒子爆炸动画特效

    HTML5和SVG是现代网页开发中的重要技术,它们结合使用可以创造出丰富且互动性强的图形效果,例如我们所说的“打开盒子爆炸动画特效”。这个特效在网页设计中常用于吸引用户的注意力,比如产品展示、游戏元素或者加载...

    一款很酷的jQuery点击图片爆炸特效.zip

    【标题】:“一款很酷的jQuery点击图片爆炸特效”指的是一个使用JavaScript库jQuery实现的特殊效果,当用户点击图片时,图片会呈现出如同爆炸般的视觉效果。这种特效能够为网页增添互动性和趣味性,吸引用户的注意力...

    Unity3D鼠标点击地面特效Real-time Strategy FX v1.0

    在这个资源包中,特效可能包含了粒子效果,当鼠标点击地面时,会触发一系列炫酷的粒子动画,如爆炸、闪光或能量释放,增强游戏的沉浸感。 2. **Unity3D的粒子系统**:粒子系统是Unity中用于创建复杂视觉效果的重要...

    H5点击网页彩色粒子爆炸特效.zip

    在本文中,我们将深入探讨如何使用HTML5 Canvas和JavaScript实现一款点击网页后产生彩色粒子爆炸特效的H5应用。这个特效能为用户带来独特的交互体验,使得网页更加生动有趣。 首先,HTML5 Canvas是一个强大的绘图...

    html5 canvas鼠标点击水珠爆炸动画特效

    这个"html5 canvas鼠标点击水珠爆炸动画特效"是利用Canvas API实现的一个交互式动画,用户可以通过鼠标点击页面上的某个点,触发水珠爆炸的动画效果。 在Canvas上实现这样的特效,主要涉及以下几个关键技术点: 1....

    html5 canvas实现的鼠标点击水珠爆炸动画特效特效代码

    这是一款基于html5 canvas实现的鼠标点击水珠爆炸动画特效源码,鼠标点击界面可出现水珠的四散爆炸动画效果,该源码没有引入任何外部图形元素,且动画效果逼真流畅,是一款非常经典的HTML5动画源码,建议使用支持...

    网页模板——一款很酷的jQuery点击图片爆炸特效.zip

    【网页模板——一款很酷的jQuery点击图片爆炸特效】 在网页设计中,视觉效果往往能够吸引用户的注意力,增强用户体验。这款“很酷的jQuery点击图片爆炸特效”就是一个很好的例子,它利用JavaScript库jQuery来实现...

    H5点击网页彩色粒子爆炸特效特效代码

    在本文中,我们将深入探讨如何实现“H5点击网页彩色粒子爆炸特效特效代码”,这是一个...总之,“H5点击网页彩色粒子爆炸特效特效代码”是一个展示Canvas强大功能的优秀示例,对于提升Web前端开发技能具有积极意义。

    html5关闭表单窗口爆炸裂开动画特效.zip

    通过查看这个文件,开发者可以学习到如何使用HTML5、CSS3和JavaScript来创建复杂的动画效果,包括如何在事件触发(比如点击关闭按钮)时启动动画,以及如何利用数学算法模拟爆炸的物理效果。 总的来说,这个压缩包...

    超酷的jQuery鼠标滑过爆炸特效

    在本文中,我们将深入探讨如何使用jQuery实现一种超酷的鼠标滑过爆炸特效。这种特效在用户将鼠标指针移动到HTML元素上时,能够触发一个动态的、视觉上吸引人的爆炸动画,通常用于增强用户体验和提升网页互动性。 ...

Global site tag (gtag.js) - Google Analytics