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

前端技术 2023/09/05 JavaScript

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

运行效果图：

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

本文地址：https://www.stayed.cn/item/14649

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案