<li><a target="_blank" href="#">大白兔</a></li>
<li><a target="_blank" href="#">大灰狼</a></li>
<li><a target="_blank" href="#">小灰兔</a></li>
<li><a target="_blank" href="#">香蕉</a></li>
<li><a target="_blank" href="#">苹果</a></li>
<li><a target="_blank" href="#">葡萄</a></li>
<li><a target="_blank" href="#">哈密瓜</a></li>
<li><a target="_blank" href="#">百度经验</a></li>
<li><a target="_blank" href="#">百度贴吧</a></li>
<li><a target="_blank" href="#">百度百科</a></li>
<li><a target="_blank" href="#">百度文库</a></li>
<li><a target="_blank" href="#">百度百家</a></li>
<li><a target="_blank" href="#">百度知道</a></li>
<li><a target="_blank" href="#">百度不知道</a></li>
</ul>
</canvas>
</div>
</div>
</div>
</body>
3、书写css代码。
<style>
* { margin: 0; padding: 0; }
#container { }
#footer { position: relative; height: 70px; clear: both; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
body { background: #2a2b2d; font: 13px/1.3 'Microsoft Yahei', '宋体'; color: #999; }
#page, #footer_inner { margin: 0 auto; width: 960px; }
h1#logo { overflow: hidden; height: 93px; padding: 25px 0; }
h1#logo a { display: block; height: 93px; }
#container { margin: 0 auto; padding: 40px 0 0; }
#container h2 { font-weight: normal; line-height: 28px; }
#container p { padding: 10px 0; }
.credit { text-align: center; padding: 20px 0 100px; font-size: 10px; }
a, a:visited { text-decoration: none; outline: none; color: #97cae6; }
a:hover { text-decoration: underline; }
#footer { background-color: #212121; width: 100%; }
#footer h2 { font-size: 18px; font-weight: normal; height: 70px; line-height: 70px; font-family: "Microsoft Yahei"; color: #eee; }
#footer_inner { position: relative; }
#footer a.tzine, a.tzine:visited { color: #FCFCFC; font-size: 12px; line-height: 70px; position: absolute; top: 0; right: 0; width: 90px; }
</style>
4、添加并引用js。添加到head标签里面。
<!--[if lt IE 9]><script src="js/excanvas.js"></script><![endif]-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.tagcanvas.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if( ! $('#myCanvas').tagcanvas({
textColour : '#ffffff',
outlineThickness : 1,
maxSpeed : 0.03,
depth : 0.75
})) {
$('#myCanvasContainer').hide();
}
});
</script>
5、代码整体结构
6、查看效果
