<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tagcanvas.min.js"></script>
<style type="text/css">
.b_10_3 {
overflow: hidden; text-align:center;
background:#999;
}
.b_10_3 span {
float: left; font-size:16px; line-height:2em;
}
.b_10_3 span.bold {
font-weight:bold;
}
.b_10_3 span:nth-child(1) {
width: 35%;
text-align: center;
}
.b_10_3 span:nth-child(2) {
width: 30%;
text-align: left;
}
.b_10_3 span:nth-child(3) {
width: 35%;
text-align: left;
}
.b_10_3 span:nth-child(4) {
width: 35%;
text-align: right;
}
.b_10_3 span:nth-child(5) {
width: 25%;
text-align: right;
}
.b_10_3 span:nth-child(6) {
width: 25%;
text-align: right;
}
.b_10_3 span:nth-child(7) {
width: 50%;
text-align: center;
}
.b_10_3 span:nth-child(8) {
width: 30%;
text-align: center;
}
.b_10_3 span:nth-child(9) {
width: 50%;
text-align: right;
}
.b_10_3 span:nth-child(10) {
width: 40%;
text-align: right;
}
</style>
<script type="text/javascript">
window.onload = function () {
try {
var i, et = document.getElementById('tags').childNodes;
for (i in et) {
et[i].nodeName == 'A' && et[i].addEventListener('click', function (e) {
e.preventDefault();
});
}
TagCanvas.Start('myCanvas', 'tags', {
textColour: '#222',
outlineColour: '#fff',
reverse: true,
depth: 0.8,
dragControl: true,
decel:0.95,
maxSpeed: 0.05,
initial: [-0.2, 0]
});
} catch (e) {
// something went wrong, hide the canvas container
//document.getElementById('myCanvasContainer').style.display = 'none';
}
};
</script>
</head>
<body>
<div class="b_10_3">
<canvas width="300" height="300" id="myCanvas"></canvas>
<div id="tags">
<a href="#">爱</a>
<a href="#">承诺</a><a href="#">轻时尚</a><a href="#">简约</a><a href="#">科技</a>
<a href="#">美丽</a><a href="#">智慧</a><a href="#">情感</a><a href="#">体验</a><a href="#">互联网</a>
</div>
</div>
</body>
</html>
html5 canvas文字标签云3D旋转动画特效
猜你喜欢
转载自blog.csdn.net/qq_37968920/article/details/82778008
今日推荐
周排行