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 事件还是要照顾下的。
如果你喜欢这个效果,也可以顺手看看这些相关资源:
如果你正好在做导航设计,不妨下载玩玩,改一改就能直接用,响应也快,兼容性也不错。
下载地址
用户评论