这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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="phperz" />
- <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 实现文字散开重组动画特效代码,希望大家可以喜欢。
来源: http://www.phperz.com/article/17/0709/269790.html