For this special effect of text dispersion and reorganization animation, we can specify any text in the input box. After clicking the OK button, the original text will explode and disperse, and the new text will be combined in the form of pixels, which looks very special. Great.
Operation rendering:
This is the effect after typing HAPPY and installing the button. Of course, you can enter any text
What cool special effects, even Chinese is supported, see the picture below:
The code for the text scattering and reorganization animation special effects shared by everyone is as follows
<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>
The above is the js css code to realize the text scattering and reorganization animation special effects code shared with you. I hope you can like it.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
