之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。

在线预览   源码下载

实现的代码。

html代码：

<canvas></canvas> <div> ?</div> <div> <input type="text" /> <span>?</span> </div> <div> <div> <div> <span>Commands</span><span>Info</span><span>Share</span></div> <div> <ul> <li><span>Text</span><span data-demo="Hello :)">Type anything</span><span>Demo</span></li> <li><span>Countdown</span><span data-demo="#countdown 10">#countdown<span>number</span></span><span>Demo</span></li> <li><span>Time</span><span data-demo="#time">#time</span><span>Demo</span></li> <li><span>Rectangle</span><span data-demo="#rectangle 30x15">#rectangle<span>width x height</span></span><span>Demo</span></li> <li><span>Circle</span><span data-demo="#circle 25">#circle<span>diameter</span></span><span>Demo</span></li> <li><span>Animate</span><span data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span>command1</span>&nbsp;|<span>command2</span></span><span>Demo</span></li> </ul> <div> <div> <h1> Shape Shifter</h1> <p> An experiment by <a href="//www.kennethcachia.com" target="_blank">Kenneth Cachia<a />.<br /> <a href="//fortawesome.github.io/Font-Awesome/#icons-new" target="_blank">Font Awesome</a> is being used to render all #icons. </p> <br /> <p> Visit <a href="http://www.kennethcachia.com/shape-shifter/?a=#icon thumbs-up" target="_blank"> Shape Shifter</a> to use icons.</p> </div> </div> <div> <div> <h1> Sharing</h1> <p> Simply add <em>?a=</em> to the current URL to share any static or animated text. Examples:</p> <p> <a href="http://www.kennethcachia.com/shape-shifter?a=Hello" target="_blank">?a=Hello</a><br /> <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank"> ?a=Hello|#countdown 3</a> </p> </div> </div> </div> </div> </div>

via：

在线预览    源码下载

加入前端爱好者QQ群(123235875) 点击加群，共同交流进度!

3小时精通html5——最全的html5入门教程