脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js+css实现文字散开重组动画特效

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

 更新时间：2015年08月21日 15:49:47   投稿：lijiao  
这篇文章主要介绍了js+css实现文字散开重组动画特效,需要的朋友可以参考下

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

运行效果图：

这是输入HAPPY后安按钮后效果，当然可以随便输文字

好酷的特效，连中文都支持，看如下图：

为大家分享的文字散开重组动画特效代码如下

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

您可能感兴趣的文章:

相关文章

  • ES6入门教程之Iterator与for...of循环详解

    ES6入门教程之Iterator与for...of循环详解

    最近在学习ES6，刚刚看到Iterator和for...of循环这一章，所以想要跟大家略微分享一下，下面这篇文章主要给大家介绍了关于ES6入门学习中Iterator与for...of循环的相关资料，不足之处还望大家多多指正，需要的朋友们可以参考学习。
    2017-05-05
  • BootStrap Table 获取同行不同列元素的方法

    BootStrap Table 获取同行不同列元素的方法

    表格同行中存在元素的相互调用，如何保证元素能够被同行不同列的其他方框使用呢？下面通过实例代码给大家介绍下，一起看看吧
    2016-12-12
  • JavaScript编程中容易出BUG的几点小知识

    JavaScript编程中容易出BUG的几点小知识

    这篇文章主要介绍了JavaScript编程中容易出BUG的几点小知识,本文总结了8条小知识,这些小知识如果弄不明白,会在编程中给你惹麻烦出BUG,需要的朋友可以参考下
    2015-01-01
  • javascript淡入淡出效果的实现思路

    javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的。平常我们说的淡入淡出效果，一般分成两部分，一半是淡入，另一半就是淡出了。不过经过分析，我觉得其实只需要一半就行了
    2012-03-03
  • 在Html中使用Requirejs进行模块化开发实例详解

    在Html中使用Requirejs进行模块化开发实例详解

    在前端模块化的时候，不仅仅是js需要进行模块化管理，html有时候也需要模块化管理。这里就介绍下如何通过requirejs，实现html代码的模块化开发
    2016-04-04
  • JS 实现完美include载入实现代码

    JS 实现完美include载入实现代码

    在写这个之前在网上搜索了些资料，发现以前写的include都存在2个问题，这也是include需要解决的比较重要的2个问题。
    2010-08-08
  • Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制

    Bootstrap每天必学之日期控制，对Bootstrap日期控制感兴趣的小伙伴们可以参考一下
    2016-03-03
  • JavaScript编写猜拳游戏

    JavaScript编写猜拳游戏

    这篇文章主要为大家详细介绍了JavaScript编写猜拳游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • setTimeout内不支持jquery的选择器的解决方案

    setTimeout内不支持jquery的选择器的解决方案

    在JS中无论是setTimeout还是setInterval，在使用函数名作为调用句柄时都不能带参数，而在许多场合必须要带参数，这就需要想方法解决。
    2015-04-04
  • 手机端点击图片放大特效PhotoSwipe.js插件实现

    手机端点击图片放大特效PhotoSwipe.js插件实现

    这篇文章主要为大家详细介绍了手机端点击图片放大特效PhotoSwipe.js插件实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论