Home > Article > Web Front-end > js+css实现文字散开重组动画特效代码分享_javascript技巧

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

WBOYOriginal: 2016-05-16 15:43:361820browse

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

运行效果图：

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS实现网页顶部向下滑出的全国城市切换导航效果_javascript技巧Next article：jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码_jquery

See more

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

Related articles