Heim > Artikel > Web-Frontend > js css realisiert Textverbreitung und Reorganisation, Animation, Spezialeffekte, Code-Sharing_Javascript-Fähigkeiten

js css realisiert Textverbreitung und Reorganisation, Animation, Spezialeffekte, Code-Sharing_Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:43:361847Durchsuche

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.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JS erkennt den landesweiten Stadtwechsel-Navigationseffekt, der vom oberen Rand der Webseite nach unten gleitet_Javascript-KenntnisseNächster Artikel：JS erkennt den landesweiten Stadtwechsel-Navigationseffekt, der vom oberen Rand der Webseite nach unten gleitet_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen