CSS3图标导航动画切换特效（css3html5导航菜单）

大家好，今天跟大家分享的是图标导航动画切换特效的实现方法，首先我们看下效果：

效果图

HTML结构：整个导航由一个无序列表<ul></ul>生成，在每个<li></li>中有一个<i></i>标签用于放置logo，有两个<u></u>标签用于生成logo外围的圆环及旋转消失动画的设置。

HTML

CSS样式设置：首先我们看一下该特效所需要的素材

背景图片

图标

基本样式：这里主要是一些尺寸和位置的设置，图中标注的部分是通过背景定位和overflow：hidden将背景初始化为隐藏状态

分别添加LOGO：本例中所有的图标都在同一张位图上，所以我们可以通过尺寸设置和位置调节来添加所需要的图标

LOGO外围圆环设置及初始化：这里主要用到clip属性，详情可参考http://www.w3school.com.cn/cssref/pr_pos_clip.asp

文本样式设置：主要是通过绝对定位将<p></p>标签中的描述性文本进行隐藏

鼠标悬停时背景动画：前面我们把背景的位置放在距离顶部400px的位置将其隐藏，现在当鼠标滑过时让背景的位置紧靠顶部，实现全覆盖，并通过transition添加过度以实现动画效果。

鼠标悬停时LOGO动画：初始化时在白色的背景中我们引用的图标是蓝色的，当鼠标滑过时，蓝色背景上移，此时我们需要将蓝色的图标换为白色，这里我们只需要改变图标的引用位置并加上过度效果，即可实现logo的动态转换

鼠标悬停时圆环动画：

最后添加描述性文字的动画效果，刷新页面查看效果

大功告成，今天就介绍到这，因为时间比较仓促没来得及检查，有什么问题请及时指出，谢谢！