首页 > 特效插件 > 粒子效果 >  基于html5和canvas的文字粒子效果——shape-shifter正文

基于html5和canvas的文字粒子效果——shape-shifter

特效介绍


    shape-shifter:基于html5和canvas的文字粒子效果,粒子从四面八方汇聚为指定的文字,然后再散开消失,这样不停的切换文字。在底部输入框输入后,回车,会就显示为想要的文字。右上角的问号,点击后,会有个弹窗,里面可以设置效果,如普通文字效果、倒计时、当前时间、显示形状等等。可以用来做大屏展示的文字切换效果,比普通文字切换炫酷多了!
使用方法
1、引入css
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
2、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></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>
  </div>
</div>
3、js
<script src="js/index.js"></script>
下载 提取码/密码:7t62(点击复制密码) 预览