js+css实现文字散开重组动画特效代码分享


Posted in Javascript onAugust 21, 2015

文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。

运行效果图:

js+css实现文字散开重组动画特效代码分享

这是输入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实现文字散开重组动画特效代码,希望大家可以喜欢。

Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
Dec 09 Javascript
用js来获取上传的文件名纯粹是为了美化而用
Oct 23 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
js中变量的连续赋值(实例讲解)
Jul 08 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
Sep 03 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php加密解密实用类分享
2014/01/07 PHP
初识ThinkPHP控制器
2016/04/07 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
js css后面所带参数含义介绍
2013/08/18 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
vue中使用echarts制作圆环图的实例代码
2018/07/27 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
python设计模式大全
2016/06/27 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
印度最大的旅游网站:MakeMyTrip
2016/10/05 全球购物
澳大利亚家具和家居用品在线商店:Interiors Online
2018/03/05 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
快餐店的创业计划书范文
2014/01/29 职场文书
四风对照检查材料范文
2014/09/27 职场文书
十八大宣传标语
2014/10/09 职场文书
2014年幼师工作总结
2014/11/22 职场文书
2014年反腐倡廉工作总结
2014/12/05 职场文书
鲁迅故居导游词
2015/02/05 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers
解析Java异步之call future
2021/06/14 Java/Android
Python-OpenCV教程之图像的位运算详解
2021/06/21 Python