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



155 619 207



特效描述:html5svg 打开盒子 爆炸动画特效,html5 svg盒子爆炸动画特效

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>

3. HTML代码

<svg height="0" width="0" style="display: block; pointer-events: none;">
	<g id="logo_technology">
		<path d="M14.1,27.6L25,31.9l10.7-4.2c0,0,0.1-0.1,0.1-0.1c0.7-1.2,1.1-2.5,1.1-4.1c0.1-1.5-0.2-4.1-0.9-7.7L33.3,0
			l-6.1,1.1l2.9,16.6c0.4,2.4,0.6,4.1,0.6,5.1c0,1.1-0.4,2-1.1,2.9c-0.7,0.9-2,1.4-3.7,1.7c-0.6,0.1-1.1,0.2-1.6,0.2
			c-1,0-1.8-0.2-2.6-0.6c-1.1-0.6-1.9-1.4-2.4-2.6c-0.3-0.7-0.7-2.4-1.1-5L15.4,3.2L9.4,4.2l2.8,16C12.8,23.5,13.4,26,14.1,27.6z"/>
		<path d="M20.1,24.1c0.4,1,1.1,1.8,2,2.3c0.6,0.3,1.4,0.5,2.2,0.5c0.5,0,1,0,1.5-0.1c1.6-0.3,2.7-0.8,3.3-1.5
			c0.6-0.7,1-1.5,0.9-2.4c0-0.9-0.2-2.4-0.5-4.5L25,22.9l-6.5-6.5l0.5,2.9C19.4,21.8,19.8,23.4,20.1,24.1z"/>
		<path d="M49.6,22.2l-10.9,4.3l7.1-7.1v-0.7L37,17c0.5,3,0.7,5.1,0.6,6.5c-0.1,1.4-0.4,2.7-0.9,3.8L25,31.9
			l-11.8-4.6c-0.6-1.7-1.2-4-1.7-6.9L11,17.5l-6.1,1.3v0.7l6.5,7.1l-11-4.3L0,22.9l11.9,5.9l0,0L22.2,33L12,29.6l0.5,9.3L25,45.8
			l12.5-6.9l0.6-10l11.9-6L49.6,22.2z M25.3,34.2L25,43.1l-0.3-9.3l10.8-3.5L25.3,34.2z"/>
		<path d="M74.5,19.1c-2.2,0-4,0.9-5.6,2.7v-9.6h-5.1v26.7h4.7v-2.8c0.8,1.1,1.7,1.9,2.8,2.4c1.1,0.6,2.2,0.8,3.3,0.8
			c2.2,0,4.1-0.9,5.7-2.7c1.6-1.8,2.4-4.3,2.4-7.6c0-3.2-0.8-5.6-2.3-7.3C78.8,20,76.8,19.1,74.5,19.1z M76.2,33.8
			c-0.8,1-1.8,1.4-2.9,1.4c-1.5,0-2.6-0.7-3.5-2c-0.6-1-0.9-2.4-0.9-4.4c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3.1-1.4
			c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C77.4,31.4,77,32.9,76.2,33.8z"/>
		<path d="M59.4,21.3c-0.5-0.6-1.2-1.1-2.1-1.6c-0.9-0.4-2-0.6-3.1-0.6c-2.6,0-4.7,1.1-6.4,3.3v-2.8h-1.1l-3.6,3.6
			v15.7h5.1v-8.7c0-2.2,0.1-3.6,0.4-4.4c0.3-0.8,0.7-1.4,1.4-1.9c0.7-0.5,1.5-0.7,2.4-0.7c0.7,0,1.3,0.2,1.8,0.5
			c0.5,0.3,0.8,0.8,1.1,1.4c0.2,0.6,0.3,2,0.3,4v9.9h5.1v-12c0-1.5-0.1-2.6-0.3-3.4C60.2,22.7,59.9,21.9,59.4,21.3z"/>
		<path d="M132.6,19.1c-2.6,0-4.7,0.9-6.3,2.7c-1.7,1.8-2.5,4.3-2.5,7.5c0,2.7,0.6,4.9,1.9,6.7
			c1.6,2.2,4.1,3.3,7.5,3.3c2.1,0,3.9-0.5,5.3-1.5c1.4-1,2.4-2.4,3.1-4.3l-5.1-0.9c-0.3,1-0.7,1.7-1.2,2.1c-0.5,0.4-1.2,0.7-2,0.7
			c-1.2,0-2.2-0.4-2.9-1.3c-0.8-0.8-1.2-2-1.2-3.5h12.8c0.1-3.9-0.7-6.8-2.4-8.7C137.8,20.1,135.5,19.1,132.6,19.1z M129.1,27.6
			c0-1.4,0.3-2.5,1.1-3.3c0.7-0.8,1.6-1.2,2.8-1.2c1,0,1.9,0.4,2.7,1.2c0.7,0.8,1.1,1.9,1.1,3.4H129.1z"/>
		<path d="M157.4,12.2v9.6c-1.6-1.8-3.4-2.7-5.6-2.7c-2.4,0-4.3,0.9-5.8,2.6c-1.5,1.7-2.3,4.2-2.3,7.5
			c0,3.2,0.8,5.7,2.4,7.5c1.6,1.8,3.5,2.7,5.7,2.7c1.1,0,2.2-0.3,3.2-0.8c1.1-0.5,2-1.4,2.8-2.5v2.8h4.7V12.2H157.4z M156.2,33.8
			c-0.8,1-1.8,1.5-3,1.5c-1.5,0-2.6-0.7-3.5-2c-0.6-0.9-0.9-2.4-0.9-4.5c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3-1.4
			c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C157.4,31.3,157,32.8,156.2,33.8z"/>
		<path d="M101.5,22c-1.9-1.9-4.3-2.8-7.2-2.8c-1.9,0-3.6,0.4-5.1,1.3c-1.5,0.8-2.7,2-3.6,3.6
			c-0.8,1.6-1.3,3.2-1.3,4.9c0,2.2,0.4,4.1,1.3,5.6c0.8,1.5,2.1,2.7,3.7,3.5c1.6,0.8,3.3,1.2,5.1,1.2c2.9,0,5.2-1,7.1-2.9
			c1.9-1.9,2.8-4.3,2.8-7.3C104.3,26.3,103.3,23.9,101.5,22z M97.7,33.6c-0.9,1-2,1.5-3.4,1.5c-1.3,0-2.5-0.5-3.4-1.5
			c-0.9-1-1.4-2.5-1.4-4.4c0-1.9,0.5-3.4,1.4-4.4c0.9-1,2-1.5,3.4-1.5c1.3,0,2.5,0.5,3.4,1.5c0.9,1,1.4,2.5,1.4,4.4
			C99,31.1,98.6,32.6,97.7,33.6z"/>
		<polygon points="113.6,26 108.2,20.2 104.3,20.2 104.3,23.1 110.3,29.5 104.3,35.8 104.3,39.1 107.8,39.1 113.6,33 
			119.3,39.1 122.9,39.1 122.9,35.8 116.9,29.5 122.9,23.3 122.9,20.2 119.1,20.2 	"/>
		<path d="M107.4,46.9v-4.5h-1.7v-0.6h4.2v0.6h-1.7v4.5H107.4z"/>
		<path d="M111.1,46.9v-5.2h3.8v0.6h-3.1v1.6h2.9v0.6h-2.9v1.8h3.2v0.6H111.1z"/>
		<path d="M120.3,45.1l0.7,0.2c-0.1,0.6-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.4-1.4,0.4c-0.6,0-1-0.1-1.4-0.3
			c-0.4-0.2-0.6-0.6-0.8-1c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.7,0.9-0.9c0.4-0.2,0.8-0.3,1.3-0.3
			c0.5,0,1,0.1,1.3,0.4c0.4,0.3,0.6,0.6,0.8,1.1l-0.7,0.2c-0.1-0.4-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.3-0.9-0.3c-0.4,0-0.7,0.1-1,0.3
			c-0.3,0.2-0.5,0.4-0.6,0.8c-0.1,0.3-0.2,0.7-0.2,1c0,0.4,0.1,0.8,0.2,1.1c0.1,0.3,0.3,0.6,0.6,0.7c0.3,0.2,0.6,0.2,0.9,0.2
			c0.4,0,0.7-0.1,1-0.3C120.1,45.8,120.3,45.5,120.3,45.1z"/>
		<path d="M122.5,46.9v-5.2h0.7v2.1h2.7v-2.1h0.7v5.2h-0.7v-2.4h-2.7v2.4H122.5z"/>
		<path d="M128.4,46.9v-5.2h0.7l2.8,4v-4h0.7v5.2h-0.7l-2.8-4.1v4.1H128.4z"/>
		<path d="M134,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
			c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
			c-0.4-0.2-0.7-0.6-0.9-1C134.1,45.3,134,44.8,134,44.4z M134.8,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
			c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
			c-0.5,0-0.9,0.2-1.3,0.5C134.9,43.1,134.8,43.6,134.8,44.4z"/>
		<path d="M140.5,46.9v-5.2h0.7v4.5h2.6v0.6H140.5z"/>
		<path d="M145,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1
			c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4
			c-0.4-0.2-0.7-0.6-0.9-1C145.1,45.3,145,44.8,145,44.4z M145.7,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5
			c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3
			c-0.5,0-0.9,0.2-1.3,0.5C145.9,43.1,145.7,43.6,145.7,44.4z"/>
		<path d="M154,44.9v-0.6l2.2,0v1.9c-0.3,0.3-0.7,0.5-1.1,0.6c-0.4,0.1-0.7,0.2-1.1,0.2c-0.5,0-1-0.1-1.4-0.3
			c-0.4-0.2-0.7-0.5-1-0.9c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.8,0.9-1c0.4-0.2,0.9-0.3,1.4-0.3
			c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.5,0.3,0.7,0.5c0.2,0.2,0.3,0.5,0.4,0.8l-0.6,0.2c-0.1-0.3-0.2-0.5-0.3-0.6
			c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.5-0.1-0.7-0.1c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.1,0.2-0.3,0.3-0.3,0.5
			c-0.1,0.3-0.2,0.7-0.2,1c0,0.5,0.1,0.8,0.2,1.2c0.2,0.3,0.4,0.5,0.7,0.7c0.3,0.2,0.6,0.2,1,0.2c0.3,0,0.6-0.1,0.9-0.2
			c0.3-0.1,0.5-0.2,0.7-0.4v-1H154z"/>
		<path d="M159.3,46.9v-2.2l-2-3h0.8l1,1.6c0.2,0.3,0.4,0.6,0.5,0.9c0.2-0.3,0.3-0.6,0.6-0.9l1-1.5h0.8l-2.1,3v2.2
			H159.3z"/>
	</g>
</svg>
<main>
	<div class="label">
		<a href="#" class="button js-trigger-reset">
			<span>重置</span>
		</a>
	</div>
	<div class="-content -index">
		<div>
			<div class="bounce-wrap">
				<div class="bounce">
					<div class="-shadow"></div>
					<div class="-box-wrap js-box-wrap">
						<div class="-box">
							<div class="front wall"></div>
							<div class="back wall"></div>
							<div class="right wall"></div>
							<div class="left wall"></div>
							<div class="front-right wall"></div>
							<div class="front-left wall"></div>
							<div class="back-right wall"></div>
							<div class="back-left wall"></div>  
						</div>
					</div>
					<div id="emitter"></div>
					<div class="explode">
						<span class="cloud -one js-cloud-1"></span>
						<span class="cloud -two js-cloud-2"></span>
						<span class="cloud -three js-cloud-3"></span>
					</div>
					<svg class="icon js-icon-logo" viewBox="0 0 162.5 47">
						<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_technology"></use>
					</svg>
				</div>
			</div>
			</div>
	</div>
</main>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 右键菜单 html5动画导航菜单 文字提示框 html5图片动画 提示框/弹出层 html5文字动画 layer html5表情动画 lightbox html5线条动画 Tooltip工具提示框 浮动提示框 html5飘落动画 html5弹窗动画 html5光标动画 html5悬停动画 加载动画 弹出层拖动 窗口提示框 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到