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

WordPress 照片lightbox效果的运用几点

Jun 22 Javascript

JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探

Jan 22 Javascript

基于jquery的loading 加载提示效果实现代码

Sep 01 Javascript

jquery模拟SELECT下拉框取值效果

Oct 23 Javascript

JS常用函数使用指南

Nov 23 Javascript

jquery判断复选框是否被选中的方法

Oct 16 Javascript

使用CDN和AJAX加速WordPress中jQuery的加载

Dec 05 Javascript

JavaScript基础语法之js表达式

Jun 07 Javascript

JS验证input输入框（字母，数字，符号，中文）

Mar 23 Javascript

webpack4打包vue前端多页面项目

Sep 17 Javascript

iview通过Dropdown(下拉菜单)实现的右键菜单

Oct 26 Javascript

js实现自动锁屏功能

Jun 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 mutisort 实现按某字段对数据排序

2013/06/18 PHP

php通过字符串调用函数示例

2014/03/02 PHP

js一组验证函数

2008/12/20 Javascript

Extjs入门之动态加载树代码

2010/04/09 Javascript

js replace正则表达式应用案例讲解

2013/01/17 Javascript

jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

2013/01/24 Javascript

表单类各种类型(文本框)失去焦点效果jquery代码

2013/04/26 Javascript

JQuery-tableDnD 拖拽的基本使用介绍

2013/07/04 Javascript

获取非最后一列td值并将title设为该值的方法

2013/10/30 Javascript

javascript实现一个数值加法函数

2015/06/26 Javascript

jQuery Validate验证框架经典大全

2015/09/23 Javascript

javascript操作cookie

2017/01/17 Javascript

js获取ip和地区

2017/03/10 Javascript

Vue.js对象转换实例

2017/06/07 Javascript

在nginx上部署vue项目(history模式)的方法

2017/12/28 Javascript

基于vue-resource jsonp跨域问题的解决方法

2018/02/03 Javascript

npm全局模块卸载及默认安装目录修改方法

2018/05/15 Javascript

基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能

2019/04/02 Javascript

Vue全局loading及错误提示的思路与实现

2019/08/09 Javascript

微信小程序iOS下拉白屏晃动问题解决方案

2019/10/12 Javascript

小程序卡片切换效果组件wxCardSwiper的实现

2020/02/13 Javascript

Openlayers3实现车辆轨迹回放功能

2020/09/29 Javascript

[02:06]DOTA2英雄基础教程暗影萨满

2013/12/16 DOTA

python encode和decode的妙用

2009/09/02 Python

Python模块学习 re 正则表达式

2011/05/19 Python

Django中间件实现拦截器的方法

2018/06/01 Python

浅析python继承与多重继承

2018/09/13 Python

python实现控制COM口的示例

2019/07/03 Python

Python+OpenCV实现实时眼动追踪的示例代码

2019/11/11 Python

Pytorch框架实现mnist手写库识别（与tensorflow对比）

2020/07/20 Python

Laura Mercier官网：彩妆大师罗拉玛斯亚的化妆品牌

2018/01/04 全球购物

如何判断计算机可能已经中马

2013/03/22 面试题

应届毕业生应聘自荐信范文

2014/02/26 职场文书

优秀班主任经验交流材料

2014/06/02 职场文书

初中作文评语

2014/12/25 职场文书

SpringBoot2 参数管理实践之入参出参与校验的方式

2021/06/16 Java/Android