mistone-html5-canvas-pixel-image
/
index.html

<!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>HTML5 Canvas生成粒子效果的人物头像DEMO演示</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="container">
		<div id="content">
		<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
		    <div class="hero">
		      <div class="demo sarah">
		        <img class="halftone" src="img/sarah-dots.png" data-src="img/sarah.jpg" />

		      </div>
		      <div class="demo ncsu">
		        <img class="halftone" src="img/ncsu.jpg" />
		      </div>
		      <div class="demo the-look">
		        <img class="halftone" src="img/the-look.jpg" />
		      </div>
		      <div class="thumbnails">
		        <img data-name="sarah" class="is-selected" src="img/sarah.jpg" />
		        <img data-name="ncsu" src="img/ncsu.jpg" />
		        <img data-name="the-look" src="img/the-look.jpg" />
		      </div>
		    </div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/breathing-halftone.pkgd.js"></script>
	<script src="js/scripts.js"></script>

</body>
</html>