Für diesen Spezialeffekt der Textverteilungs- und Reorganisationsanimation können wir einen beliebigen Text im Eingabefeld angeben. Nach dem Klicken auf die Schaltfläche „OK“ wird der Originaltext explodiert und verteilt und der neue Text wird in Form von Pixeln kombiniert , was ganz besonders aussieht.
Operationsrendering:
Dies ist der Effekt, nachdem Sie HAPPY eingegeben und den Button installiert haben. Natürlich können Sie einen beliebigen Text eingeben
Welche coolen Spezialeffekte, sogar Chinesisch, unterstützt werden, sehen Sie im Bild unten:
Der Code für die Spezialeffekte der Textstreuungs- und Reorganisationsanimation, die von allen geteilt werden, lautet wie folgt
<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>
Das Obige ist der JS-CSS-Code zur Realisierung des mit Ihnen geteilten Textstreuungs- und Reorganisationsanimations-Spezialeffektcodes.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
