<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 SVG仿iPhone拍照快门效果 - 网页模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
</head>
<body>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:200' rel='stylesheet' type='text/css'>
<div class="main-content">
<div class="mask">
<svg width="100%" height="100%" viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<defs>
<filter id="shadow1">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" />
<feOffset dx="2" dy="1" result="offsetblur" mode="multiply"/>
</filter>
<filter id="shadow2">
<feGaussianBlur stdDeviation="2" in="SourceAlpha" />
<feOffset dx="-2" dy="-1" result="offsetblur" mode="multiply"/>
</filter>
</defs>
<g><path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z" filter="url(#shadow1)"/></g>
<g><path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z" filter="url(#shadow2)"/></g>
<g id="mask">
<path d="M-0.511,0v400h401V0H-0.511z M360.729,292.798l-161.24,93.093L38.25,292.798V106.614l161.239-93.092l161.24,93.092V292.798z"/>
</g>
<g class="border1">
<polygon points="199.49,14.678 156.518,39.627 149.93,28.684 199.587,0.015 322.441,70.946 315.668,81.778" />
<polygon points="156.867,38.268 151.312,29.041 199.587,1.17 321.044,71.294 315.332,80.429 199.489,13.522" />
</g>
<g class="border2">
<polygon points="359.598,248.5 359.598,107.141 313.935,80.777 320.708,69.945 372.365,99.769 372.365,248.5"/>
<polygon points="315.332,80.429 360.598,106.564 360.598,247.5 371.365,247.5 371.365,100.346 321.044,71.294"/>
</g>
<g class="border3">
<polygon points="238.784,361.657 359.598,291.906 359.598,246.5 372.365,246.5 372.365,299.277 243.778,373.516"/>
<polygon points="360.598,247.5 360.598,292.483 240.048,362.082 244.26,372.084 371.365,298.7 371.365,247.5"/>
</g>
<g class="border4">
<polygon points="73.809,326.412 81.666,316.204 199.486,384.732 240.526,360.641 245.523,372.509 199.587,399.03"/>
<polygon points="240.048,362.082 199.489,385.89 81.922,317.51 75.297,326.117 199.587,397.876 244.26,372.084"/>
</g>
<g class="border5">
<polygon points="26.809,299.277 26.809,158.045 39.576,157.452 39.576,291.906 83.411,317.215 75.556,327.421"/>
<polygon points="81.922,317.51 38.576,292.483 38.576,158.5 27.809,159 27.809,298.7 75.297,326.117"/>
</g>
<g class="border6">
<polygon points="26.809,99.769 151.662,27.684 158.249,38.625 39.253,107.19 39.582,159.454 26.809,160.047"/>
<polygon points="38.576,158.5 38.25,106.614 156.867,38.268 151.312,29.041 27.809,100.346 27.809,159"/>
</g>
</svg>
</div>
<div class="shutter-area">
<div class="text">
<h3>Dan's</h3>
<h2>SHUTTER</h2>
<h1>TEST</h1>
</div>
<div class="shutter no-1">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg>
<!--<svg width="200%" height="200%" viewBox="0 0 184.451 186.986" enable-background="new 0 0 184.451 186.986" xml:space="preserve">
<path d="M184.451,94.943V0H24.413C8.867,28.493,0,61.293,0,96.208c0,32.716,7.78,63.578,21.55,90.778,C55.825,132.013,115.928,95.426,184.451,94.943z" />
</svg>-->
</div>
<div class="shutter no-2">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>
<div class="shutter no-3">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>
<div class="shutter no-4">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>
<div class="shutter no-5">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>
<div class="shutter no-6">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200%" height="200%" viewBox="-6.274 0 190.726 186.986" enable-background="new -6.274 0 190.726 186.986" xml:space="preserve">
<path d="M184.451,104.943V0H8.157C-7.389,28.493-6.256,61.293-6.256,96.208c0,32.716,14.036,63.578,27.806,90.778
C55.825,132.013,115.929,105.426,184.451,104.943z"/>
</svg></div>
</div><!--shutter-area-->
</div><!--main-content-->
<script src='js/TweenMax.min.js'></script>
<script src="js/index.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
