jquery+svg实现带声音模态层窗口关闭爆裂动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：弹出层

代码描述：jquery+svg实现带声音模态层窗口关闭爆裂动画效果代码，用到了howler.js、tween.js及html2canvas.js。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于SVG超炫爆裂式关闭模态窗口特效</title>

    <style>
        body, html { font-size: 100%; 	padding: 0; margin: 0;}
        
        /* Reset */
        *,
        *:after,
        *:before {
        	-webkit-box-sizing: border-box;
        	-moz-box-sizing: border-box;
        	box-sizing: border-box;
        }
        
        /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
        .clearfix:before,
        .clearfix:after {
        	content: " ";
        	display: table;
        }
        
        .clearfix:after {
        	clear: both;
        }
        
        body{
        	background: #494A5F;
        	color: #D5D6E2;
        	font-weight: 500;
        	font-size: 1.05em;
        	font-family: "Microsoft YaHei","宋体","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
        }
        a{color: #2fa0ec;text-decoration: none;outline: none;}
        a:hover,a:focus{color:#74777b;}
        
        .htmleaf-container{
        	margin: 0 auto;
        	overflow: hidden;
        }
        .grid {
          zoom: 1;
        }
        .grid:after,
        .grid:before {
          content: '';
          display: table;
        }
        .grid:after {
          clear: both;
        }
        .grid .grid-bit {
          float: left;
          padding-left: 0.625rem;
          padding-right: 0.3125rem;
        }
        .grid .grid-bit:last-of-type {
          padding-right: 0.625rem;
        }
        .grid .grid-bit + .grid-bit {
          padding-left: 0.3125rem;
        }
        .grid--gutter-x2 .grid-bit {
          padding-left: 1.25rem;
          padding-right: 0.625rem;
        }
        .grid--gutter-x2 .grid-bit:last-of-type {
          padding-right: 1.25rem;
        }
        .grid--gutter-x2 .grid-bit + .grid-bit {
          padding-left: 0.625rem;
        }
        .grid--gutter-x3 .grid-bit {
          padding-left: 1.875rem;
          padding-right: 0.9375rem;
        }
        .grid--gutter-x3 .grid-bit:last-of-type {
          padding-right: 1.875rem;
        }
        .grid--gutter-x3 .grid-bit + .grid-bit {
          padding-left: 0.9375rem;
        }
        .grid--gutter-x4 .grid-bit {
          padding-left: 2.5rem;
          padding-right: 1.25rem;
        }
        .grid--gutter-x4 .grid-bit:last-of-type {
          padding-right: 2.5rem;
        }
        .grid--gutter-x4 .grid-bit + .grid-bit {
          padding-left: 1.25rem;
        }
        .grid--gutter-x5 .grid-bit {
          padding-left: 3.125rem;
          padding-right: 1.5625rem;
        }
        .grid--gutter-x5 .grid-bit:last-of-type {
          padding-right: 3.125rem;
        }
        .grid--gutter-x5 .grid-bit + .grid-bit {
          padding-left: 1.5625rem;
        }
        .grid--gutter-x6 .grid-bit {
          padding-left: 3.75rem;
          padding-right: 1.875rem;
        }
        .grid--gutter-x6 .grid-bit:last-of-type {
          padding-right: 3.75rem;
        }
        .grid--gutter-x6 .grid-bit + .grid-bit {
          padding-left: 1.875rem;
        }
        .grid--gutter-x7 .grid-bit {
          padding-left: 4.375rem;
          padding-right: 2.1875rem;
        }
        .grid--gutter-x7 .grid-bit:last-of-type {
          padding-right: 4.375rem;
        }
        .grid--gutter-x7 .grid-bit + .grid-bit {
          padding-left: 2.1875rem;
        }
        .grid--gutter-x8 .grid-bit {
          padding-left: 5rem;
          padding-right: 2.5rem;
        }
        .grid--gutter-x8 .grid-bit:last-of-type {
          padding-right: 5rem;
        }
        .grid--gutter-x8 .grid-bit + .grid-bit {
          padding-left: 2.5rem;
        }
        .grid--gutter-x9 .grid-bit {
          padding-left: 5.625rem;
          padding-right: 2.8125rem;
        }
        .grid--gutter-x9 .grid-bit:last-of-type {
          padding-right: 5.625rem;
        }
        .grid--gutter-x9 .grid-bit + .grid-bit {
          padding-left: 2.8125rem;
        }
        .grid--gutter-x10 .grid-bit {
          padding-left: 6.25rem;
          padding-right: 3.125rem;
        }
        .grid--gutter-x10 .grid-bit:last-of-type {
          padding-right: 6.25rem;
        }
        .grid--gutter-x10 .grid-bit + .grid-bit {
          padding-left: 3.125rem;
        }
        .grid--sliced .grid-bit:first-of-type {
          padding-left: 0;
        }
        .grid--sliced .grid-bit:last-of-type {
          padding-right: 0;
        }
        .grid-bit--1-20 {
          width: 5%;
        }
        .grid-bit--2-20 {
          width: 10%;
        }
        .grid-bit--3-20 {
          width: 15%;
        }
        .grid-bit--4-20 {
          width: 20%;
        }
        .grid-bit--5-20 {
          width: 25%;
        }
        .grid-bit--6-20 {
          width: 30%;
        }
        .grid-bit--7-20 {
          width: 35%;
        }
        .grid-bit--8-20 {
          width: 40%;
        }
        .grid-bit--9-20 {
          width: 45%;
        }
        .grid-bit--10-20 {
          width: 50%;
        }
        .grid-bit--11-20 {
          width: 55%;
        }
        .grid-bit--12-20 {
          width: 60%;
        }
        .grid-bit--13-20 {
          width: 65%;
        }
        .grid-bit--14-20 {
          width: 70%;
        }
        .grid-bit--15-20 {
          width: 75%;
        }
        .grid-bit--16-20 {
          width: 80%;
        }
        .grid-bit--17-20 {
          width: 85%;
        }
        .grid-bit--18-20 {
          width: 90%;
        }
        .grid-bit--19-20 {
          width: 95%;
        }
        .grid-bit--20-20 {
          width: 100%;
        }
        * {
          box-sizing: border-box;
        }
        .hin.........完整代码请登录后点击上方下载按钮下载查看