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

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

好酷的特效,连中文都支持,看如下图:

为大家分享的文字散开重组动画特效代码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <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实现文字散开重组动画特效代码,希望大家可以喜欢。