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

2019-12-18,,,

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

运行效果图:

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

您可能感兴趣的文章:

  • 基于JavaScript实现弹幕特效
  • 简单实现JavaScript弹幕效果
  • JavaScript直播评论发弹幕切图功能点集合效果代码
  • JS实现自定义状态栏动画文字效果示例
  • 利用JS实现文字的聚合动画效果
  • js实现动画特效的文字链接鼠标悬停提示的方法
  • js实现文字闪烁特效的方法
  • JS溶解形式的文字切换特效
  • JS旋转的彩色文字轮转特效
  • JS实现的视频弹幕效果示例

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

下载本文的Word格式文档,以方便收藏与打印。