由於技術快速發展，靜態頁面已吸引不了用戶眼光，所以網站增加一些動畫效果，不僅可以使客戶眼前一亮，也能提高體驗互動；本文主要介紹加載網站logo高度動態變化和快捷菜單的動畫效果，實現過程不是唯一的，只是給大家提供一種思路。
加載網站logo高度動態變化
現在很多網站設計都喜歡打開顯示大圖片，顯得高端大氣，但是打開後又覺得佔太多地方， 不便於查看內容；所以爲了達到更好的體驗，就會在加載網站時候，顯示大圖片，過了幾秒後，變成另外一種排版（高度縮窄），效果變化如下圖。
html和css樣式如下圖，主要注意logo、標題、搜索框和背景圖的樣式，後面的動畫就是處理這幾個的樣式變化，從而產生動畫效果。
實現原理就是在加載頁面後，過2秒後（setTimeout(animateHeader, 2000)，可以根據頁面複製程度修改定時器時間），相應的元素進行移位（animateHeader函數控制移位數據，可根據實際情況修改），爲了動畫過程比較順暢，需加上JQ的animate，且保持結束動作一致，設置的時間都爲1500毫秒，可根據實際情況修改。
網站快捷菜單的動畫效果
網站設計簡潔是現階段用戶需求，因爲內容不會顯得雜亂，且便於用戶查找信息；但又需要使用快捷菜單來豐富模塊內容，且爲了提高交互，使用各種動畫效果，增加點擊慾望。
效果如下圖1，移動到灰色圖標，會有一個向下滾動到藍色圖標的效果。
實現原理：可查看圖3（html和css樣式），移上去灰色圖標時候，背景定位改變，從而產生換圖標效果，這個時候只是單純變換圖標，加上transition: all .3s ease-in-out纔有滾動變換過程。
