工具/材料

Sublime Text

操作方法

• 01

  先打開Sublime Text，然后在編輯器中添加HTML5頁面，如下圖所示，由于頁面中中文，所以編碼需要設置成utf-8的格式

  
• 02

  接下來需要下載Jquery UI的庫文件，并且在HTML中導入Jquery UI的樣式庫文件，如下圖所示

  
• 03

  由于顏色動畫特效需要JS腳本控制，所以需要導入Jquery的腳本和Jquery ui的腳本，如下圖所示。因為Jquery ui是用jquery編寫的，所以先導入Jquery文件

  
• 04

  然后在body標簽中添加一個p和一個按鈕。Div標簽是我們要操作的顏色塊，按鈕用來觸發動畫操作，如下圖所示

  
• 05

  接下來在頁面中添加style標簽，并為上面設置的p顏色塊來添加樣式，如下圖所示

  
• 06

  然后在script標簽中添加我們腳本代碼，如下圖所示，通過調用animate方法進行動畫調用，它可以直接指定顏色塊的背景顏色

  
• 07

  最后，我們運行頁面程序，你會在頁面中看到一個顏色塊和一個按鈕，點擊按鈕以后，顏色塊發生變化了，如下圖所示