手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js+css实现文字散开重组动画特效代码分享
js+css实现文字散开重组动画特效代码分享
摘要:文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常...

文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。

运行效果图:

js+css实现文字散开重组动画特效代码分享1

这是输入HAPPY后安按钮后效果,当然可以随便输文字

js+css实现文字散开重组动画特效代码分享2

好酷的特效,连中文都支持,看如下图:

js+css实现文字散开重组动画特效代码分享3

为大家分享的文字散开重组动画特效代码如下

<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实现文字散开重组动画特效代码,希望大家可以喜欢。

【js+css实现文字散开重组动画特效代码分享】相关文章:

js实现两点之间画线的方法

jQuery计算文本框字数及限制文本框字数的方法

JS和css实现检测移动设备方向的变化并判断横竖屏幕

JS+DIV实现鼠标划过切换层效果的方法

JavaScript实现点击文字切换登录窗口的方法

JS实现模拟风力的雪花飘落效果

javascript搜索框效果实现方法

jQuery实现控制文字内容溢出用省略号(…)表示的方法

JavaScript实现带标题的图片轮播特效

js实现带按钮的上下滚动效果

精品推荐
分类导航