首頁 > web前端 > js教程 > js css實作文字散開重組動畫特效程式碼分享_javascript技巧

js css實作文字散開重組動畫特效程式碼分享_javascript技巧

WBOY
發布: 2016-05-16 15:43:36
原創
1907 人瀏覽過

文字散開重組動畫這款特效我們可以在輸入框中指定任意文字,點擊確定按鈕後,就會將原先的文字爆炸散去,新的文字以像素點的形式組合起來,看起來非常棒。

運作效果圖:

這是輸入HAPPY後安鈕後效果,當然可以隨便輸文字

好酷的特效,連中文都支持,看如下圖:

為大家分享的文字散開重組動畫特效代碼如下

<html>

<head>

<meta charset="UTF-8">

<title>文字散开重组动画特效</title>

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

</head>

<body>

<canvas id="text" width="500" height="100"></canvas>

<canvas id="stage" width="500" height="100"></canvas>

<form id="form">
  <input type="text" id="inputText" value="脚本之家" />
  <input type="submit" value="TRY IT" />
</form>

<script src='js/EasePack.min.js'></script>
<script src='js/TweenLite.min.js'></script>
<script src='js/easeljs-0.7.1.min.js'></script>
<script src='js/requestAnimationFrame.js'></script>
<script src="js/index.js"></script>

</body>
</html>
登入後複製

以上就是為大家分享的js css實作文字散開重組動畫特效程式碼,希望大家可以喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板