在网页设计中,导航栏是一个非常重要的元素。下划线文字导航是一种常见的导航栏样式,它会给用户带来清晰的导航指引。下面我们来一步步实现 CSS 下划线文字导航。/* HTML 代码 */ <
在网页设计中,导航栏是一个非常重要的元素。下划线文字导航是一种常见的导航栏样式,它会给用户带来清晰的导航指引。下面我们来一步步实现 CSS 下划线文字导航。
/* HTML 代码 */ <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">服务项目</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> /* CSS 代码 */ nav { background-color: #fff; height: 50px; border-bottom: 2px solid #ccc; text-align: center; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin: 0 30px; } nav a { display: inline-block; position: relative; padding-bottom: 10px; text-decoration: none; color: #666; } nav a::after { content: '; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #f00; transform: scaleX(0); transform-origin: center; transition: all 0.3s; } nav a:hover::after { transform: scaleX(1); }
上述代码实现了一个简单的下划线文字导航。我们首先设置了导航栏的样式和元素的布局,然后设置了我们要用到的伪元素 ::after,并通过设置 transform 和 transition 属性来达到下划线动画的效果。
以上就是 CSS 下划线文字导航的实现方法。此例只用了最基础的样式和属性,如果你想要更加美观和创意的下划线样式,可以继续探索更多实现方法。
粉丝
0
关注
0
收藏
0