编程 Javascript

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

Posted in Javascript onAugust 21, 2015

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

运行效果图：

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

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

好酷的特效，连中文都支持，看如下图：

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

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

<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实现文字散开重组动画特效代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码

Mar 21 Javascript

XMLHTTP 乱码的解决方法（UTF8,GB2312 编码解码）

Jan 12 Javascript

JS获取鼠标坐标的实例方法

Jul 18 Javascript

用jquery方法操作radio使其默认选项是否

Sep 10 Javascript

jquery实现鼠标拖动图片效果示例代码

Jan 09 Javascript

js实现浏览器窗口大小被改变时触发事件的方法

Feb 02 Javascript

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

May 13 Javascript

JS组件Form表单验证神器BootstrapValidator

Jan 26 Javascript

浅谈Angular中ngModel的$render

Oct 24 Javascript

jQuery中select与datalist制作下拉菜单时的区别浅析

Dec 30 Javascript

Vue+iview+webpack ie浏览器兼容简单处理

Sep 20 Javascript

quickjs 封装 JavaScript 沙箱详情

Nov 02 Javascript

jquery实现叠层3D文字特效代码分享

Aug 21 #Javascript

jQuery实现垂直半透明手风琴特效代码分享

Aug 21 #Javascript

js实现温度计时间样式代码分享

Aug 21 #Javascript

js实现select跳转菜单新窗口效果代码分享(超简单)

Aug 21 #Javascript

JS打字效果的动态菜单代码分享

Aug 21 #Javascript

JS实现表单中checkbox对勾选中增加边框显示效果

Aug 21 #Javascript

jQuery实现动态表单验证时文本框抖动效果完整实例

Aug 21 #Javascript

You might like

《PHP编程最快明白》第二讲数字、浮点、布尔型、字符串和数组

2010/11/01 PHP

PHP运用foreach神奇的转换数组(实例讲解)

2018/02/01 PHP

php实现微信支付之现金红包

2018/05/30 PHP

YII2框架中查询生成器Query()的使用方法示例

2020/03/18 PHP

php+mysql实现的无限分类方法类定义与使用示例

2020/05/27 PHP

初窥JQuery(一)jquery选择符必备知识点

2010/11/25 Javascript

js操作textarea 常用方法总结

2012/12/03 Javascript

jQuery实现设置、移除文本框默认值功能

2015/01/13 Javascript

js实现鼠标感应向下滑动隐藏菜单的方法

2015/02/20 Javascript

Angularjs制作简单的路由功能demo

2015/04/14 Javascript

JavaScript程序中的流程控制语句用法总结

2016/05/23 Javascript

大型JavaScript应用程序架构设计模式

2016/06/29 Javascript

JS中常用的正则表达式

2016/09/29 Javascript

js控制台输出的方法(详解)

2016/11/26 Javascript

Javascript实现倒计时时差效果

2017/05/18 Javascript

vue 中自定义指令改变data中的值

2017/06/02 Javascript

web前端vue实现插值文本和输出原始html

2018/01/19 Javascript

js中Object.defineProperty()方法的不详解

2018/07/09 Javascript

使用Vue调取接口,并渲染数据的示例代码

2019/10/28 Javascript

[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛

2015/08/02 DOTA

Python运行的17个时新手常见错误小结

2012/08/07 Python

Python ValueError: invalid literal for int() with base 10 实用解决方法

2015/06/21 Python

python 3利用BeautifulSoup抓取div标签的方法示例

2017/05/28 Python

完美解决在oj中Python的循环输入问题

2018/06/25 Python

Python操作mongodb数据库的方法详解

2018/12/08 Python

深入浅析python 协程与go协程的区别

2019/05/09 Python

使用Python-OpenCV向图片添加噪声的实现(高斯噪声、椒盐噪声)

2019/05/28 Python

python3 selenium自动化测试强大的CSS定位方法

2019/08/23 Python

python+selenium 鼠标事件操作方法

2019/08/24 Python

TensorFlow:将ckpt文件固化成pb文件教程

2020/02/11 Python

html5使用canvas画三角形

2014/12/15 HTML / CSS

幼儿园中秋节活动方案2013

2014/01/29 职场文书

高二物理教学反思

2014/02/08 职场文书

教师党员公开承诺事项

2014/05/28 职场文书

绿色环保口号

2014/06/12 职场文书

立春观后感

2015/06/18 职场文书