html5 canvas文字標籤雲3D旋轉動畫特效
阿新 • • 發佈:2019-02-07
<!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>