编程 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玩一玩WSH吧

Feb 23 Javascript

jQuery源码分析-03构造jQuery对象-源码结构和核心函数

Nov 14 Javascript

javascript 正则表达式相关应介绍

Nov 27 Javascript

jquery trigger伪造a标签的click事件取代window.open方法

Jun 23 Javascript

js日期范围初始化得到前一个月日期的方法

May 05 Javascript

使用CoffeeScrip优美方式编写javascript代码

Oct 28 Javascript

JS+Canvas绘制时钟效果

Aug 20 Javascript

使用JS编写的随机抽取号码的小程序

Aug 11 Javascript

Javascript快速实现浏览器系统通知

Aug 26 Javascript

浅谈JavaScript面向对象--继承

Mar 20 Javascript

JQuery省市联动效果实现过程详解

May 08 jQuery

vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解

Dec 15 Vue.js

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

某大型网络公司应聘时的笔试题目附答案

2008/03/27 PHP

php获取远程图片的两种 CURL方式和sockets方式获取远程图片

2011/11/07 PHP

ThinkPHP3.1的Widget新用法

2014/06/19 PHP

php之Smarty模板使用方法示例详解

2014/07/08 PHP

javascript实现输出指定行数正方形图案的方法

2015/08/03 Javascript

jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码

2015/09/09 Javascript

js小数计算小数点后显示多位小数的实现方法

2016/05/30 Javascript

浅谈sass在vue注意的地方

2017/08/10 Javascript

垃圾回收器的相关知识点总结

2018/05/13 Javascript

JavaScript 中的12种循环遍历方法【总结】

2018/05/31 Javascript

使用pkg打包Node.js应用的方法步骤

2018/10/19 Javascript

jQuery实现上下滚动公告栏详细代码

2018/11/21 jQuery

JavaScript位置参数实现原理及过程解析

2020/09/14 Javascript

详解Vue中Axios封装API接口的思路及方法

2020/10/10 Javascript

[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼

2014/07/07 DOTA

[10:07]2014DOTA2国际邀请赛实拍选手现场观战DK对阵Titan

2014/07/12 DOTA

[01:28]国服启动器接入蒸汽平台操作流程视频

2021/03/11 DOTA

Python基础入门之seed()方法的使用

2015/05/15 Python

python中map()函数的使用方法示例

2017/09/29 Python

Python+Turtle动态绘制一棵树实例分享

2018/01/16 Python

python实现扫描日志关键字的示例

2018/04/28 Python

python破解bilibili滑动验证码登录功能

2019/09/11 Python

python对象转字典的两种实现方式示例

2019/11/07 Python

手把手教你安装Windows版本的Tensorflow

2020/03/26 Python

使用tensorflow框架在Colab上跑通猫狗识别代码

2020/04/26 Python

Python如何使用PIL Image制作GIF图片

2020/05/16 Python

python 最简单的实现适配器设计模式的示例

2020/06/30 Python

切尔西足球俱乐部官方网上商店：Chelsea FC

2019/06/17 全球购物

2014年学生会工作总结

2014/11/07 职场文书

2014年小学工作总结

2014/11/26 职场文书

2014年中职班主任工作总结

2014/12/16 职场文书

工作时间证明

2015/06/15 职场文书

使用CSS3实现按钮悬停闪烁动态特效代码

2021/08/30 HTML / CSS

python 判断字符串当中是否包含字符(str.contain)

2022/06/01 Python

MySQL远程无法连接的一些常见原因总结

2022/09/23 MySQL

CSS 鼠标点击拖拽效果的实现代码

2022/12/24 HTML / CSS