HTML5 Canvas粒子特效文字动画

逐凨 • • 前端

粒子组成文字特效，效果不错。

下面输入框可以输入预览文字。

 

 

资源文件下载
来源：默认网盘

 

部分代码展示：

<!DOCTYPE html>
<html>

<head>

<meta charset="UTF-8">

<title>HTML5 Canvas粒子特效文字动画 DEMO演示</title>

<link rel="stylesheet" href="static/css/normalize.css">

<link rel="stylesheet" href="static/css/style.css" media="screen" type="text/css" />

</head>

<body>
<div style="text-align:center;clear:both;position:absolute;top:0;left:260px"><script src="static/js/follow.js" type="text/javascript"></script>
</div>
<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>

<script src="static/js/index.js"></script>

</body>

</html>
《HTML5 Canvas粒子特效文字动画》版权归逐凨所有
转载请保留原文链接：https://izhizu.com/frontend/415.html
THE END
分享
二维码
< <上一篇
下一篇>>