由于技术快速发展，静态页面已吸引不了用户眼光，所以网站增加一些动画效果，不仅可以使客户眼前一亮，也能提高体验互动；本文主要介绍加载网站logo高度动态变化和快捷菜单的动画效果，实现过程不是唯一的，只是给大家提供一种思路。
加载网站logo高度动态变化
现在很多网站设计都喜欢打开显示大图片，显得高端大气，但是打开后又觉得占太多地方， 不便于查看内容；所以为了达到更好的体验，就会在加载网站时候，显示大图片，过了几秒后，变成另外一种排版（高度缩窄），效果变化如下图。
html和css样式如下图，主要注意logo、标题、搜索框和背景图的样式，后面的动画就是处理这几个的样式变化，从而产生动画效果。
实现原理就是在加载页面后，过2秒后（setTimeout(animateHeader, 2000)，可以根据页面复制程度修改定时器时间），相应的元素进行移位（animateHeader函数控制移位数据，可根据实际情况修改），为了动画过程比较顺畅，需加上JQ的animate，且保持结束动作一致，设置的时间都为1500毫秒，可根据实际情况修改。
网站快捷菜单的动画效果
网站设计简洁是现阶段用户需求，因为内容不会显得杂乱，且便于用户查找信息；但又需要使用快捷菜单来丰富模块内容，且为了提高交互，使用各种动画效果，增加点击欲望。
效果如下图1，移动到灰色图标，会有一个向下滚动到蓝色图标的效果。
实现原理：可查看图3（html和css样式），移上去灰色图标时候，背景定位改变，从而产生换图标效果，这个时候只是单纯变换图标，加上transition: all .3s ease-in-out才有滚动变换过程。
