js+css實現文字散開重組動畫特效代碼分享
更新時間：2015年08月21日 15:49:47 投稿：lijiao
這篇文章主要介紹了js+css實現文字散開重組動畫特效,需要的朋友可以參考下
文字散開重組動畫這款特效我們可以在輸入框中指定任意文字，點擊確定按鈕后，就會將原先的文字爆炸散去，新的文字以像素點的形式組合起來，看起來非常棒。
運行效果圖：
這是輸入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實現文字散開重組動畫特效代碼，希望大家可以喜歡。
相關文章
ES6入門教程之Iterator與for...of循環(huán)詳解
最近在學習ES6，剛剛看到Iterator和for...of循環(huán)這一章，所以想要跟大家略微分享一下，下面這篇文章主要給大家介紹了關于ES6入門學習中Iterator與for...of循環(huán)的相關資料，不足之處還望大家多多指正，需要的朋友們可以參考學習。2017-05-05
表格同行中存在元素的相互調用，如何保證元素能夠被同行不同列的其他方框使用呢？下面通過實例代碼給大家介紹下，一起看看吧2016-12-12
這篇文章主要介紹了JavaScript編程中容易出BUG的幾點小知識,本文總結了8條小知識,這些小知識如果弄不明白,會在編程中給你惹麻煩出BUG,需要的朋友可以參考下2015-01-01
這個思路是最近寫XScroll.js類的時候想明白的。平常我們說的淡入淡出效果，一般分成兩部分，一半是淡入，另一半就是淡出了。不過經過分析，我覺得其實只需要一半就行了2012-03-03
在Html中使用Requirejs進行模塊化開發(fā)實例詳解
在前端模塊化的時候，不僅僅是js需要進行模塊化管理，html有時候也需要模塊化管理。這里就介紹下如何通過requirejs，實現html代碼的模塊化開發(fā)2016-04-04
在寫這個之前在網上搜索了些資料，發(fā)現以前寫的include都存在2個問題，這也是include需要解決的比較重要的2個問題。2010-08-08
Bootstrap每天必學之日期控制，對Bootstrap日期控制感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要為大家詳細介紹了JavaScript編寫猜拳游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
在JS中無論是setTimeout還是setInterval，在使用函數名作為調用句柄時都不能帶參數，而在許多場合必須要帶參數，這就需要想方法解決。2015-04-04
這篇文章主要為大家詳細介紹了手機端點擊圖片放大特效PhotoSwipe.js插件實現方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08