運行效果圖:
這是輸入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實現文字散開重組動畫特效代碼,希望大家可以喜歡。