首页 > 编程 > JavaScript > 正文

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

2019-11-20 11:46:02
字体:
来源:转载
供稿:网友

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

运行效果图:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表