基于HTML5 Canvas粒子效果文字动画特效

 <canvas class="canvas"></canvas>
    <div class="help">
        ?</div>
    <div class="ui">
        <input class="ui-input" type="text" />
        <span class="ui-return">↵</span>
    </div>
    <div class="overlay">
        <div class="tabs">
            <div class="tabs-labels">
                <span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span
                    class="tabs-label">Share</span></div>
            <div class="tabs-panels">
                <ul class="tabs-panel commands">
                    <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info"
                        data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Countdown</span><span
                        class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span
                            class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info"
                        data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Rectangle</span><span
                        class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width
                            x height</span></span><span class="commands-item-action">Demo</span></li>
                    <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info"
                        data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span
                            class="commands-item-action">Demo</span></li>
                    <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span
                        class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span
                            class="commands-item-mode">command1</span>&nbsp;|<span class="commands-item-mode">command2</span></span><span
                                class="commands-item-action">Demo</span></li>
                </ul>
                <div class="tabs-panel ui-details">
                    <div class="ui-details-content">
                        <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 class="tabs-panel ui-share">
                    <div class="ui-share-content">
                        <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">www.kennethcachia.com/shape-shifter?a=Hello</a><br />
                            <a href="http://www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3" target="_blank">
                                www.kennethcachia.com/shape-shifter?a=Hello|#countdown 3</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>