js+css實(shí)現(xiàn)文字散開重組動畫特效代碼分享
更新時(shí)間：2015年08月21日 15:49:47 投稿：lijiao
這篇文章主要介紹了js+css實(shí)現(xiàn)文字散開重組動畫特效,需要的朋友可以參考下
文字散開重組動畫這款特效我們可以在輸入框中指定任意文字，點(diǎn)擊確定按鈕后，就會將原先的文字爆炸散去，新的文字以像素點(diǎn)的形式組合起來，看起來非常棒。
運(yùn)行效果圖：
這是輸入HAPPY后安按鈕后效果，當(dāng)然可以隨便輸文字
好酷的特效，連中文都支持，看如下圖：
為大家分享的文字散開重組動畫特效代碼如下
<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實(shí)現(xiàn)文字散開重組動畫特效代碼，希望大家可以喜歡。
相關(guān)文章
javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)當(dāng)前頁導(dǎo)航激活的方法,涉及javascript操作css的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
JS用 或 || 來兼容FireFox!...2006-11-11
這篇文章主要介紹了js返回上一頁并刷新的幾種方法,需要的朋友可以參考下2014-02-02
今天小編就為大家分享一篇layer彈出層顯示在top頂層的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)表格循環(huán)滾動，每次滾動一行停頓，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
javascript相等運(yùn)算符與等同運(yùn)算符詳細(xì)介紹
不管是java、c++、php都有相等運(yùn)算符與等同運(yùn)算符，當(dāng)然javasript也不例外，下面介紹一下2013-11-11
詳解用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能
本篇文章主要對用原生JavaScript實(shí)現(xiàn)jQuery的某些簡單功能進(jìn)行詳細(xì)全面的講解，具有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript的事件流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
javascript前端埋點(diǎn)上報(bào)的幾種方式
本文將介紹前端埋點(diǎn)上報(bào)的幾種常見方式,并詳細(xì)闡述如何在項(xiàng)目中運(yùn)用這些方式進(jìn)行數(shù)據(jù)上報(bào),以幫助開發(fā)者更好地進(jìn)行數(shù)據(jù)收集和分析,感興趣的可以了解一下2023-11-11
這篇文章主要介紹了JS實(shí)現(xiàn)的圖片自動輪換效果，有具體的實(shí)現(xiàn)思路及截圖，希望對大家學(xué)習(xí)有所幫助2014-04-04