Animation Generator是一款可以安裝到谷歌瀏覽器上使用并支持所有chrome內核瀏覽器操作的開發者工具實時預覽功能的強大插件,使用這款插件能讓您的代碼在未保存的情況下就能預覽效果。是集成在開發者工具Devtools的一個功能。它能幫助開發者迅速為原本死氣沉沉的頁面上的元素添加動畫和實時預覽,并生成兼容多瀏覽器的CSS動畫代碼。
操作步驟
1、在HTML中,為需要添加動畫的元素添加前綴為"anim-"的類,如anim-arrow。
2、打開開發者工具,使用放大鏡選中帶有"anim-"前綴的類的元素。
3、在Style,Event Listener等標簽欄切換到Animation Generator。
4、現在開始給你的元素添加動畫吧。
使用方法
方法一:.crx文件格式插件安裝
1、首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕,在下拉框中選擇設置。
2、在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序或直接輸入:chrome://extensions/
3、找到自己已經下載好的Chrome離線安裝文件xxx.crx,然后將其從資源管理器中拖動到Chrome的擴展管理界面中,這時候用戶會發現在擴展管理器的中央部分中會多出一個”拖動以安裝“的插件按鈕。
4、松開鼠標就可以把當前正在拖動的插件安裝到谷歌瀏覽器中去,但是谷歌考慮用戶的安全隱私,在用戶松開鼠標后還會給予用戶一個確認安裝的提示。
5、用戶這時候只需要點擊添加按鈕就可以把該離線Chrome插件安裝到谷歌瀏覽器中去,安裝成功以后該插件會立即顯示在瀏覽器右上角(如果有插件按鈕的話),如果沒有插件按鈕的話,用戶還可以通過Chrome擴展管理器找到已經安裝的插件。
方法二:文件夾格式插件安裝
1、首先用戶點擊谷歌瀏覽器右上角的自定義及控制按鈕,在下拉框中選擇設置。
2、在打開的谷歌瀏覽器的擴展管理器最左側選擇擴展程序。
3、勾選開發者模式,點擊加載已解壓的擴展程序,將文件夾選擇即可安裝插件。