编程 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 相关文章推荐

百度留言本js 大家可以参考下

Oct 13 Javascript

javascript当中的代码嗅探扩展原生对象和原型(prototype)

Jan 11 Javascript

使用jsonp完美解决跨域问题

Nov 27 Javascript

深入理解JavaScript 函数

Jun 06 Javascript

JS对象深度克隆实例分析

Mar 16 Javascript

快速掌握jquery分页插件jqPaginator的使用方法

Aug 09 jQuery

使用JavaScript实现点击循环切换图片效果

Sep 03 Javascript

js实现可以点击收缩或张开的悬浮窗

Sep 18 Javascript

layui表格数据重载

Jul 27 Javascript

Node.js安装详细步骤教程(Windows版)详解

Sep 01 Javascript

实例分析JS中的相等性判断===、 ==和Object.is()

Nov 17 Javascript

原生js canvas实现鼠标跟随效果

Aug 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

深入array multisort排序原理的详解

2013/06/18 PHP

完善CodeIgniter在IDE中代码提示功能的方法

2014/07/19 PHP

利用PHP访问带有密码的Redis方法示例

2017/02/09 PHP

Laravel find in set排序实例

2019/10/09 PHP

JavaScript Event学习第二章 Event浏览器兼容性

2010/02/07 Javascript

jquery的Tooltip插件 qtip使用详细说明

2010/09/08 Javascript

Jquery 过滤器(first,last,not,even,odd)的使用

2014/01/22 Javascript

JQuery选中checkbox方法代码实例（全选、反选、全不选）

2015/04/27 Javascript

jquery简单实现网页层的展开与收缩效果

2015/08/07 Javascript

json格式的javascript对象用法分析

2016/07/04 Javascript

移动端翻页插件dropload.js（支持Zepto和jQuery）

2016/07/27 Javascript

jquery表单插件form使用方法详解

2017/01/20 Javascript

利用node.js实现反向代理的方法详解

2017/07/24 Javascript

jQuery 动画与停止动画效果实例详解

2020/05/19 jQuery

Vue.js暴露方法给WebView的使用操作

2020/09/07 Javascript

vue 通过 Prop 向子组件传递数据的实现方法

2020/10/30 Javascript

python中使用mysql数据库详细介绍

2015/03/27 Python

python文件写入实例分析

2015/04/08 Python

TensorFlow中权重的随机初始化的方法

2018/02/11 Python

Python中的Numpy矩阵操作

2018/08/12 Python

Python使用装饰器模拟用户登陆验证功能示例

2018/08/24 Python

python利用ffmpeg进行录制屏幕的方法

2019/01/10 Python

Opencv-Python图像透视变换cv2.warpPerspective的示例

2019/04/11 Python

Python argparse模块使用方法解析

2020/02/20 Python

如何实现更换Jupyter Notebook内核Python版本

2020/05/18 Python

解决Keras 自定义层时遇到版本的问题

2020/06/16 Python

HTML5操作WebSQL数据库的实例代码

2017/08/26 HTML / CSS

Reebonz中国官网：新加坡奢侈品购物网站

2017/03/17 全球购物

美国传奇滑手Paul Rodriguez创办的街头滑板品牌：Primitive Skateboarding

2019/10/29 全球购物

全球最大化妆品零售网站：SkinStore

2020/10/24 全球购物

企业管理培训感言

2014/01/27 职场文书

秘书英文求职信范文

2014/01/31 职场文书

入党自我评价范文

2014/02/02 职场文书

母校寄语大全

2014/04/10 职场文书

局领导领导班子四风对照检查材料

2014/09/27 职场文书

迎新生标语大全

2014/10/06 职场文书