Rumah > Artikel > hujung hadapan web > js+css实现文字散开重组动画特效代码分享_javascript技巧
js+css实现文字散开重组动画特效代码分享_javascript技巧
- WBOYasal
- 2016-05-16 15:43:361820semak imbas
文字散开重组动画这款特效我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。
运行效果图：
这是输入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实现文字散开重组动画特效代码，希望大家可以喜欢。
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JS实现网页顶部向下滑出的全国城市切换导航效果_javascript技巧Artikel seterusnya：jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码_jquery