当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-12 07:11 编辑：来源：阅读：
扫一扫，手机访问

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

文字散开重组动画这款特效我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。运行效果图： [img]http://files.jb51.net/file_images/article/201508/2015821154653412.jpg?2015721154715[/img] 这是输入HAPPY后安按钮后效果，当然可以随便输文字 [img]http://files.jb51.net/file_images/article/201508/2015821154757960.jpg?201572115487[/img] 好酷的特效，连中文都支持，看如下图： [img]http://files.jb51.net/file_images/article/201508/2015821154841110.jpg?2015721154852[/img] 为大家分享的文字散开重组动画特效代码如下

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

全部评论(0)

上一篇：一个JavaScript用逗号分割字符串实例
下一篇：safari调试iOS app web页面的步骤

资讯排行榜
更多>>