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

Javascript常考语句107条收集

Mar 09 Javascript

Js 随机数产生6位数字

May 13 Javascript

JavaScript中获取未知对象属性的代码

Apr 27 Javascript

使用js判断数组中是否包含某一元素(类似于php中的in_array())

Dec 12 Javascript

浅谈 jQuery 事件源码定位问题

Jun 18 Javascript

基于jQuery实现美观且实用的倒计时实例代码

Dec 30 Javascript

javascript实现右侧弹出“分享到”窗口效果

Feb 01 Javascript

JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案

Jul 27 Javascript

mongoose设置unique不生效问题的解决及如何移除unique的限制

Nov 07 Javascript

react+redux的升级版todoList的实现

Dec 18 Javascript

浅谈Vue.use的使用

Aug 29 Javascript

浅谈javascript错误处理

Aug 11 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 goto语句简介和使用实例

2014/03/11 PHP

在win系统安装配置 Memcached for PHP 5.3 图文教程

2015/03/03 PHP

laravel validate 设置为中文的例子(验证提示为中文)

2019/09/29 PHP

MooBox 基于Mootools的对话框插件

2012/01/20 Javascript

jQuery 插件仿百度搜索框智能提示(带Value值)

2013/01/22 Javascript

JavaScript去除空格的三种方法(正则/传参函数/trim)

2013/02/06 Javascript

js控制的遮罩层实例介绍

2013/05/29 Javascript

jquery和雅虎的yql服务实现天气预报服务示例

2014/02/08 Javascript

2014 HTML5/CSS3热门动画特效TOP10

2014/12/07 Javascript

浅析javascript操作 cookie对象

2014/12/26 Javascript

JavaScript自定义数组排序方法

2015/02/12 Javascript

jQuery异步提交表单实例

2017/05/30 jQuery

ES6 Object属性新的写法实例小结

2019/06/25 Javascript

解决vue初始化项目时,一直卡在Project description上的问题

2019/10/31 Javascript

微信小程序开发之获取用户手机号码(php接口解密)

2020/05/17 Javascript

微信小程序学习总结（三）条件、模板、文件引用实例分析

2020/06/04 Javascript

Python3.4 tkinter,PIL图片转换

2018/06/21 Python

Python实现八皇后问题示例代码

2018/12/09 Python

使用Python向DataFrame中指定位置添加一列或多列的方法

2019/01/29 Python

python多环境切换及pyenv使用过程详解

2019/09/27 Python

Python基于requests库爬取网站信息

2020/03/02 Python

jupyter lab的目录调整及设置默认浏览器为chrome的方法

2020/04/10 Python

在python里使用await关键字来等另外一个协程的实例

2020/05/04 Python

python filecmp.dircmp实现递归比对两个目录的方法

2020/05/22 Python

欧洲最大的化妆品连锁公司：Douglas道格拉斯

2017/05/06 全球购物

澳大利亚领先的孕妇服装品牌：Mamaway

2018/08/14 全球购物

如何进行有效的自我评价

2013/09/27 职场文书

销售人员自我评价

2014/02/01 职场文书

先进班组事迹材料

2014/12/25 职场文书

党员公开承诺书2015

2015/01/21 职场文书

社区扶贫帮困工作总结

2015/05/20 职场文书

装修公司管理制度

2015/08/05 职场文书

领导激励员工的演讲稿，各种会上用得到，建议收藏

2019/08/13 职场文书

如何判断pytorch是否支持GPU加速

2021/06/01 Python

HTML+CSS实现导航条下拉菜单的示例代码

2021/08/02 HTML / CSS

Python 装饰器(decorator)常用的创建方式及解析

2022/04/24 Python