前言：
眼前姐妹们对“css3切换效果代码”大致比较看重，朋友们都需要剖析一些“css3切换效果代码”的相关资讯。那么小编也在网络上网罗了一些对于“css3切换效果代码””的相关资讯，希望同学们能喜欢，小伙伴们一起来学习一下吧！大家好，今天跟大家分享的是图标导航动画切换特效的实现方法，首先我们看下效果：
效果图
HTML结构：整个导航由一个无序列表<ul></ul>生成，在每个<li></li>中有一个<i></i>标签用于放置logo，有两个<u></u>标签用于生成logo外围的圆环及旋转消失动画的设置。
HTML
CSS样式设置：首先我们看一下该特效所需要的素材
背景图片
图标
基本样式：这里主要是一些尺寸和位置的设置，图中标注的部分是通过背景定位和overflow：hidden将背景初始化为隐藏状态
分别添加LOGO：本例中所有的图标都在同一张位图上，所以我们可以通过尺寸设置和位置调节来添加所需要的图标
LOGO外围圆环设置及初始化：这里主要用到clip属性，详情可参考
文本样式设置：主要是通过绝对定位将<p></p>标签中的描述性文本进行隐藏
鼠标悬停时背景动画：前面我们把背景的位置放在距离顶部400px的位置将其隐藏，现在当鼠标滑过时让背景的位置紧靠顶部，实现全覆盖，并通过transition添加过度以实现动画效果。
鼠标悬停时LOGO动画：初始化时在白色的背景中我们引用的图标是蓝色的，当鼠标滑过时，蓝色背景上移，此时我们需要将蓝色的图标换为白色，这里我们只需要改变图标的引用位置并加上过度效果，即可实现logo的动态转换
鼠标悬停时圆环动画：
最后添加描述性文字的动画效果，刷新页面查看效果
大功告成，今天就介绍到这，因为时间比较仓促没来得及检查，有什么问题请及时指出，谢谢！
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css3切换效果代码
