<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>css3背景虚化效果 - 站长素材</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="configuration">
<h3>Bokeh Effect</h3>
<p>Total number of orbs</p>
<p><input type="text" id="nrOfOrbs" value="100" /></p>
<p>Size between <input type="text" id="orbMin" size="3" value="50" /> and <input type="text" id="orbMax" size="3" value="150" /> px</p>
<p>Single colour (RGB) <input type="text" id="orbColour" size="8" value="10, 30, 70" /></p>
<p>Or, use random colours <input type="checkbox" id="orbRandom" checked="checked" /></p>
<p>Use gradients? <input type="checkbox" id="orbGradient" checked="checked" /></p>
<input type="button" id="changeEffects" value="Apply" />
<input type="button" id="clearBokeh" value="Clear" />
<input type="button" id="hideOptions" value="Hide options" />
<input type="button" id="hideTitle" value="Hide title" />
</div>
<div id="wrapper">
<div id="title">
<h1>css3背景虚化效果</h1>
<h2><a href="http://www.moobnn.com/" title="Visit Marcofolio.net">www.moobnn.com</a></h2>
</div>
<div id="bokehs">
<!-- Bokeh will get injected dynamically using jQuery -->
</div>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器:FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">站长素材</a></p>
</div>
</body>
</html>