点击后文字会炸开的HTML5特效图片爆炸效果

2024-09-05 12:19:11

字体：大中小

来源：转载

供稿：网友

点击后文字会炸开的HTML5特效图片爆炸效果，点击文字就可看到像天女散花一样的效果啦，觉得挺不错，不过本效果不能在IE8下运行，是基于HTML5和JavaScript技术的，最好在chrome和火狐下浏览。

<!DOCTYPE HTML><html><head><title>jQuery点击图片爆炸特效</title><style>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: 50px 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><script src="http://www.vevb.com/ajaxjs/jquery-1.9.1.min.js"></script><script>$(document).ready(function() {	(genClips = function() {		$t = $('.clipped-box');		var amount = 5;		var width = $t.width() / amount;		var height = $t.height() / amount;		var totalSquares = Math.pow(amount, 2);		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() {				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></head><body><div class="container">	<div class="clipped-box">		<div class="content">			<h1>点击这里的文字会炸开</h1>			<p>I'll explode into pieces!</p>		</div>	</div></div></body></html>

上一篇：prefix css3漏斗Loading加载动画

下一篇：HTML5游戏：生命游戏+代码