ホームページ > 記事 > ウェブフロントエンド > js cssでテキスト展開と再編成を実現アニメーション特殊効果コード共有_javascriptスキル
js cssでテキスト展開と再編成を実現アニメーション特殊効果コード共有_javascriptスキル
- WBOYオリジナル
- 2016-05-16 15:43:361847ブラウズ
テキストの分散と再構成のアニメーションの特殊効果では、入力ボックスで任意のテキストを指定できます。[OK] ボタンをクリックすると、元のテキストが爆発して分散し、新しいテキストがピクセルの形で結合されます。とても特別に見えます。
オペレーションレンダリング:
これは「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 コードです。気に入っていただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。