编程 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读取ASP设定的COOKIE

Feb 15 Javascript

javascript 进阶篇1 正则表达式，cookie管理，userData

Mar 14 Javascript

JS去除数组重复值的五种不同方法

Sep 06 Javascript

自己使用jquery写的一个无缝滚动的插件

Apr 30 Javascript

JS中的form.submit()不能提交表单的错误原因

Oct 08 Javascript

浅谈javascript中this在事件中的应用

Feb 15 Javascript

直接拿来用的15个jQuery代码片段

Sep 23 Javascript

Bootstrap教程JS插件滚动监听学习笔记分享

May 18 Javascript

微信小程序中post方法与get方法的封装

Sep 26 Javascript

axios使用拦截器统一处理所有的http请求的方法

Nov 02 Javascript

vue中使用props传值的方法

May 08 Javascript

何时/使用 Vue3 render 函数的教程详解

Jul 25 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

DC宇宙的第一个英雄，堪称动漫史鼻祖，如今成为美国文化的象征

2020/04/09 欧美动漫

jQuery 源码分析笔记

2011/05/25 PHP

自己实现ajax封装示例分享

2014/04/01 Javascript

元素未显示设置width/height时IE中使用currentStyle获取为auto

2014/05/04 Javascript

SuperSlide2实现图片滚动特效

2014/06/20 Javascript

node.js中的fs.symlinkSync方法使用说明

2014/12/15 Javascript

基于JavaScript实现图片点击弹出窗口而不是保存

2016/02/06 Javascript

JavaScript中两个字符串的匹配

2016/06/08 Javascript

json定义及jquery操作json的方法

2016/10/03 Javascript

微信小程序网络请求(GET请求)详解

2016/11/16 Javascript

使用nodejs下载风景壁纸

2017/02/05 NodeJs

Vue生命周期示例详解

2017/04/12 Javascript

jQuery滚动插件scrollable.js用法分析

2017/05/25 jQuery

Vue 2.0学习笔记之Vue中的computed属性

2017/10/16 Javascript

vue2.0 datepicker使用方法

2018/02/04 Javascript

Bootstrap实现的表格合并单元格示例

2018/02/06 Javascript

vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题

2020/07/31 Javascript

python实现批量下载新浪博客的方法

2015/06/15 Python

在Python的Django框架中创建和使用模版

2015/07/15 Python

python中input()与raw_input()的区别分析

2016/02/27 Python

Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法

2016/04/12 Python

使用Python3 编写简单信用卡管理程序

2016/12/21 Python

详解Pandas之容易让人混淆的行选择和列选择

2019/07/10 Python

关于Python3 lambda函数的深入浅出

2019/11/27 Python

Python时间差中seconds和total_seconds的区别详解

2019/12/26 Python

Python爬虫实现模拟点击动态页面

2020/03/05 Python

Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)

2020/07/03 Python

美国知名男士服饰品牌：Brooks Brothers（布克兄弟）

2016/08/25 全球购物

全球最大的网上自行车商店：Chain Reaction Cycles

2016/12/02 全球购物

Ivory Isle Designs美国/加拿大：婚礼和活动文具公司

2018/08/21 全球购物

医学生求职自荐书

2014/06/12 职场文书

英语系毕业生求职信

2014/07/13 职场文书

2014年自愿离婚协议书范本

2014/09/25 职场文书

检讨书模板大全

2015/05/07 职场文书

python 如何用map()函数创建多线程任务

2021/04/07 Python

Python尝试实现蒙特卡罗模拟期权定价

2022/04/21 Python