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;
        }
        .hint {
          font-size: 0.875rem;
          line-height: 1.5rem;
          color: #fff;
          position: absolute;
          letter-spacing: 0.0625rem;
          opacity: 0;
        }
        .hint--1 {
          width: 10rem;
          top: 15rem;
          left: -11.875rem;
          padding-top: 1.75rem;
          background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNzVweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgNzUgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQYXRoLTY0LSstUGF0aC02NiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzcuNTAwMDAwLCA4LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzcuNTAwMDAwLCAtOC4wMDAwMDApIHRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBhdGggZD0iTTEuODMxOTg3OTgsMS4wNjk0OTI1MiBMMS4zODUyNTM5MSw1LjMyMTc3NzM0IEw1LjQyMDQxMDE2LDUuNjkyODcxMDkiIGlkPSJQYXRoLTY0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjQwMjgzMiwgMy4zODExODIpIHJvdGF0ZSgyMC4wMDAwMDApIHRyYW5zbGF0ZSgtMy40MDI4MzIsIC0zLjM4MTE4MikgIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIuMDY2NDA2MjUsNC4xMzY3MTg3NSBDMi4wNjY0MDYyNSw0LjEzNjcxODc1IDMxLjY4MTI4MDEsLTUuMzAxMjE2NTggNzIuNzE2MzA4NiwxMy45OTY1ODIiIGlkPSJQYXRoLTY1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=") no-repeat right top;
        }
        .hint--2 {
          right: -10rem;
          top: -1.25rem;
          width: 9.375rem;
          padding-top: 0.625rem;
          padding-left: 0.625rem;
          text-align: right;
          background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNzRweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgNzQgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQYXRoLTY0LSstUGF0aC02NSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDEuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjgzMTk4Nzk3NywzLjA2OTQ5MjUyIEwwLjM4NTI1MzkwNiw3LjMyMTc3NzM0IEw0LjQyMDQxMDE2LDcuNjkyODcxMDkiIGlkPSJQYXRoLTY0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEuMDY2NDA2MjUsNi4xMzY3MTg3NSBDMS4wNjY0MDYyNSw2LjEzNjcxODc1IDMzLjM1NTQ2ODgsLTEyLjU1NTY2NDEgNzEuNzE2MzA4NiwxNS45OTY1ODIiIGlkPSJQYXRoLTY1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=") no-repeat left top;
        }
        body,
        html {
          font-family: OpenSans, 'Open Sans', sans-serif;
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        body {
          background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNTA0cHgiIGhlaWdodD0iNDMxcHgiIHZpZXdCb3g9IjAgMCA1MDQgNDMxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4gICAgICAgIDx0aXRsZT5icmVhay1tb2RhbC1zY3JlZW48L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZS.........完整代码请登录后点击上方下载按钮下载查看