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

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

jerry

HTML代码

复制格式化注释注释清空

放大

<!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 type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

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

分类

HTML5代码

描述

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