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

MultiSelect左右选择控件的设计与实现介绍

Jun 08 Javascript

js验证整数加保留小数点的简单实例

Dec 02 Javascript

10分钟学会写Jquery插件实例教程

Sep 06 Javascript

js实现图片放大和拖拽特效代码分享

Sep 05 Javascript

JavaScript实现数据类型的相互转换

Mar 06 Javascript

最全的Javascript编码规范(推荐)

Jun 22 Javascript

图解prototype、proto和constructor的三角关系

Jul 31 Javascript

详解Angular系列之变化检测(Change Detection)

Feb 26 Javascript

iview在vue-cli3如何按需加载的方法

Oct 31 Javascript

jQuery实现二级导航菜单的示例

Sep 30 jQuery

vue中解决微信html5原生ios虚拟键返回不刷新问题

Oct 20 Javascript

原生js实现贪吃蛇游戏

Oct 26 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

PHPlet在Windows下的安装

2006/10/09 PHP

PHP中去除换行解决办法小结（PHP_EOL）

2011/11/27 PHP

浅析Yii中使用RBAC的完全指南(用户角色权限控制)

2013/06/20 PHP

解析关于java,php以及html的所有文件编码与乱码的处理方法汇总

2013/06/24 PHP

PHP实现SMTP邮件的发送实例

2018/09/27 PHP

javascript编程起步（第二课）

2007/02/27 Javascript

Jquery进度条插件 Progress Bar小问题解决

2011/07/12 Javascript

JS实现可直接显示网页代码运行效果的HTML代码预览功能实例

2015/08/06 Javascript

jquery中取消和绑定hover事件的实现代码

2016/06/02 Javascript

JS实现的跨浏览器解析XML文件实例

2016/06/21 Javascript

require、backbone等重构手机图片查看器

2016/11/17 Javascript

Angular.JS利用ng-disabled属性和ng-model实现禁用button效果

2017/04/05 Javascript

VUE Error: getaddrinfo ENOTFOUND localhost

2018/05/03 Javascript

nodejs二进制与Buffer的介绍与使用

2019/07/11 NodeJs

JavaScript setTimeout()基本用法有哪些

2020/11/04 Javascript

[08:02]DOTA2牵红线 zhou神抱得美人归

2014/03/22 DOTA

Python脚本实现代码行数统计代码分享

2015/03/10 Python

python连接远程ftp服务器并列出目录下文件的方法

2015/04/01 Python

Python修改MP3文件的方法

2015/06/15 Python

详解Django缓存处理中Vary头部的使用

2015/07/24 Python

Python实现字典的遍历与排序功能示例

2017/12/23 Python

python实现windows倒计时锁屏功能

2019/07/30 Python

详解Python实现进度条的4种方式

2020/01/15 Python

Python单例模式的四种创建方式实例解析

2020/03/04 Python

Python是怎样处理json模块的

2020/07/16 Python

pandas针对excel处理的实现

2021/01/15 Python

pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异

2021/02/25 Python

Django后端按照日期查询的方法教程

2021/02/28 Python

is_file和file_exists效率比较

2021/03/14 PHP

教师通用专业自荐书范文

2014/02/11 职场文书

奥巴马开学演讲稿

2014/05/15 职场文书

办理收楼委托书范本

2014/10/09 职场文书

民主生活会汇报材料

2014/12/15 职场文书

2015婚礼主持词开场白

2015/05/28 职场文书

《金钱的魔力》教学反思

2016/02/20 职场文书

python可视化大屏库big_screen示例详解

2021/11/23 Python