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