溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
可視化CSS3動畫代碼生成js庫插件bounce js怎么用，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
Bounce.js是一款功能非常強大的可視化CSS3動畫代碼生成js庫插件。該js庫插件提供了一個在線APP，通過該APP可以在可視化的條件下編輯CSS3的各種動畫效果，如移動、旋轉、傾斜、easing等效果，編輯完成后可以直接獲取該CSS3幀動畫的代碼，復制代碼帶你的頁面中即可在你的頁面上獲得與該動畫一樣的效果。此外，你也可以單獨使用Bounce.js，通過js代碼來完成各種CSS3動畫效果。Bounce.js能與jQuery完美結合。
Bounce.js安裝
可以通過Bower或NPM來安裝Bounce.js。
$bowerinstallbounce.js
#OR
$npminstallbounce.js
Bounce.js使用方法
要使用bounce.js來創建CSS3動畫，首先要創建一個Bounce對象。
varbounce=newBounce();
制作CSS3動畫前必須先創建Bounce對象，然后使用該對象來添加各種動畫組件：scale、rotate、translate和skew。你可以為CSS3動畫定義一個名稱，或者直接在該對象上應用頁面上的某個元素。
添加CSS3動畫組件
scale
如上面所說的，你要使用scale、rotate、translate或skew方法來創建動畫。所用這些方法都接收一定數量的參數，如from和to參數定義動畫元素的開始和結束位置。所用這些方法都是可以鏈式編程的。
varbounce=newBounce();
bounce.scale({
from:{x:0.5,y:0.5},
to:{x:1,y:1}
});
上面代碼中的from和to參數定義了元素在X軸（寬度）和Y軸（高度）上scale的比例。這個例子使元素從50%的大小變化到100%的大小。
rotate
varbounce=newBounce();
bounce.rotate({
from:0,
to:90
});
上面代碼中的from和to參數定義了元素旋轉的度數。
總之，Bounce.js給大家簡單的介紹了一些，希望大家多看看。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
