你的位置:首页 > 网页设计

[网页设计]基于HTML5 Canvas粒子效果文字动画特效


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

在线预览   源码下载

实现的代码。

html代码:

 <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="http://www.cnblogs.com///www.kennethcachia.com" target="_blank">Kenneth Cachia<a />.<br />                <a href="http://www.cnblogs.com///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>

via:http://www.w2bc.com/Article/31144