CSS3鼠标滑过导航条淡入淡出效果
黑色简洁风格的导航条效果，滑上去能做出那种淡淡的过渡动画，挺适合拿来做高端网页的主导航。
用的是div 结构搭配CSS3 的 transition属性，整个思路比较直接。先写一个基本的导航结构，像：
<nav>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>在 CSS 里，先把标签的文字透明掉，color: transparent，再加上transition: all 0.3s ease，就是动画的核心了。滑上去的时候把opacity调成 1，颜色切换成白色：
.nav-links li:hover a {
color: #fff;
opacity: 1;
}淡出也简单，用:not(:hover)的方式让没被 hover 的链接透明掉：
.nav-links li:not(:hover) a {
opacity: 0;
}整体来说，这种写法挺干净的，适合追求细节的页面。你可以在这个压缩包texiao1427_1560680959里看看完整代码。
如果你想拓展玩法，可以再加些阴影、边框、圆角啥的，或者配合下媒体查询做点响应式。对移动端兼容也别忘了，touch 事件还是要照顾下的。
如果你喜欢这个效果，也可以顺手看看这些相关资源：
如果你正好在做导航设计，不妨下载玩玩，改一改就能直接用，响应也快，兼容性也不错。
下载地址
用户评论
