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实现文字散开重组动画特效代码,希望大家可以喜欢。
相关文章
JavaScript html5 canvas画布中删除一个块区域的方法
这篇文章主要介绍了JavaScript html5 canvas画布中删除一个块区域的方法,涉及JavaScript结合html5操作canvas画布图形绘制的技巧,需要的朋友可以参考下2016-01-01ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
这篇文章主要介绍了ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案,在文章中用到了angularjs的指令知识点,对ionic隐藏底部导航栏知识感兴趣的朋友一起学习吧2016-11-11bootstrap-closable-tab可实现关闭的tab标签页插件
这篇文章主要为大家详细介绍了bootstrap-closable-tab可实现关闭的tab标签页插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2020-08-08Javascript实现快速排序(Quicksort)的算法详解
排序算法(Sorting algorithm)是计算机科学最古老、最基本的课题之一,要想成为合格的程序员,就必须理解和掌握各种排序算法。2015-09-09
最新评论