分享一個css3 點擊爆炸下落的特效代碼

一個代碼簡潔，效果明顯的jquery+css3特效 點擊div塊狀，會自動破碎並散落到網頁底部

[圖片]

[代碼]

$(document).ready(function() {// Generate the clips. In this case I'm using 5 (or 25 pieces)(genClips = function() {// For easy use$t = $('.clipped-box');// Like I said, we're using 5!var amount = 5;// Get the width of each clipped rectangle.var width = $t.width() / amount;var height = $t.height() / amount;// The total is the square of the amountvar totalSquares = Math.pow(amount, 2);// The HTML of the contentvar html = $t.find('.content').html();var y = 0;for(var z = 0; z <= (amount*width); z = z+width) { $('<p class="clipped" style="clip: rect('+y+'px, '+(z+width)+'px, '+(y+height)+'px, '+z+'px)">'+html+'</p>').appendTo($t);if(z === (amount*width)-width) {y = y + height;z = -width;}if(y === (amount*height)) {z = 9999999;}}})();// A quick random function for selecting random numbersfunction rand(min, max) {return Math.floor(Math.random() * (max - min + 1)) + min;}// A variable check for when the animation is mostly overvar first = false,clicked = false;// On click$('.clipped-box p').on('click', function() {if(clicked === false) {clicked = true;$('.clipped-box .content').css({'display' : 'none'});// Apply to each clipped-box p.$('.clipped-box p:not(.content)').each(function() {// So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot// But otherwise it seems too slow. That's due to how I handled the timeout.var v = rand(120, 90),angle = rand(80, 89), // The angle (the angle of projection) is a random number between 80 and 89 degrees.theta = (angle * Math.PI) / 180, // Theta is the angle in radiansg = -9.8; // And gravity is -9.8. If you live on another planet feel free to change// $(this) as selfvar self = $(this);// time is initially zero, also set some random variables. It's higher than the total time for the projectile motion// because we want the squares to go off screen. var t = 0,z, r, nx, ny,totalt =  15;// The direction can either be left (1), right (-1) or center (0). This is the horizontal direction.var negate = [1, -1, 0],direction = negate[ Math.floor(Math.random() * negate.length) ];// Some random numbers for altering the shapes positionvar randDeg = rand(-5, 10), randScale = rand(0.9, 1.1),randDeg2 = rand(30, 5);// Because box shadows are a bit laggy (by a bit I mean 'box shadows will not work on inpidual clipped ps at all') // we're altering the background colour slightly manually, in order to give the ps differentiation when they are// hovering around in the air.var color = $(this).css('backgroundColor').split('rgb(')[1].split(')')[0].split(', '),colorR = rand(-20, 20),  // You might want to alter these manually if you change the colorcolorGB = rand(-20, 20),  // To get the right consistency.newColor = 'rgb('+(parseFloat(color[0])+colorR)+', '+(parseFloat(color[1])+colorGB)+', '+(parseFloat(color[2])+colorGB)+')';// And apply those$(this).css({'transform' : 'scale('+randScale+') skew('+randDeg+'deg) rotateZ('+randDeg2+'deg)', 'background' : newColor}); // Set an intervalz = setInterval(function() { // Horizontal speed is constant (no wind resistance on the internet)var ux = ( Math.cos(theta) * v ) * direction;// Vertical speed decreases as time increases before reaching 0 at its peakvar uy = ( Math.sin(theta) * v ) - ( (-g) * t);// The horizontal positionnx = (ux * t);// s = ut + 0.5at^2ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));// Apply the positions$(self).css({'bottom' : (ny)+'px', 'left' : (nx)+'px'});// Increase the time by 0.10t = t + 0.10;// If the time is greater than the total time clear the intervalif(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'});// Finally clear the intervalclearInterval(z);}}, 10); // Run this interval every 10ms. Changing this will change the pace of the animation});}});r = setInterval(function() {// This is a bit rough but it does the jobif(first === true) {// I've just put this in so the deleted box will come down again after its been clicked.// That way you can keep pressing delete.$('.clipped-box').css({'top' : '0', 'transition' : ''});$('.clipped-box p').css({'opacity' : '1', 'transition' : '', 'background-color' : ''});$('.content').css({'display' : 'block'});first = false;}}, 300);});