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 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
javascript css styleFloat和cssFloat
Mar 15 Javascript
一个关于javascript匿名函数的问题分析
Mar 30 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
js实现DOM走马灯特效的方法
Jan 21 Javascript
javascript连续赋值问题
Jul 08 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
详解webpack 多入口配置
Jun 16 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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 读取文本文件内容并分页显示
2016/01/02 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
js表格分页实现代码
2009/09/18 Javascript
Jquery cookie操作代码
2010/03/14 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
JavaScript的继承的封装介绍
2013/10/15 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
jQuery实现基本动画效果的方法详解
2018/09/06 jQuery
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python矩阵的转置和逆转实例
2018/12/12 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
使用Python实现音频双通道分离
2020/12/25 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
美国木工工具和用品商店:Woodcraft
2019/10/30 全球购物
《最可爱的人》教学反思
2014/02/14 职场文书
最常使用的求职信
2014/05/25 职场文书
群众路线表态发言材料
2014/10/17 职场文书
大学生在校表现评语
2014/12/31 职场文书
高一军训口号
2015/12/25 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python