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