CSS3是现代Web设计中不可或缺的一部分,它可以帮助开发者创造出炫酷的效果来。其中,上下导航效果是一个非常受欢迎的效果,它可以让网站的导航更加有趣和有吸引力。下面,我们来学习一下如何使用CSS3来实现这种效果。
.navbar { display: flex; justify-content: center; height: 50px; background-color: #333; position: relative; } .navbar::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #333 transparent; } .navbar a { color: white; text-decoration: none; font-size: 16px; padding: 10px; position: relative; z-index: 1; } .navbar a::after { content: ''; position: absolute; left: 0; top: -10px; width: 100%; height: 10px; background-color: #333; transform-origin: bottom; transform: scaleY(0); transition: transform 0.3s ease-out; } .navbar a:hover::after { transform: scaleY(1); } .navbar a.active::after { transform: scaleY(1); }
如上所示,我们首先创建一个.navbar类来包含我们的导航。然后,通过设置display: flex和justify-content: center来水平居中我们的导航。接着,我们添加了一个伪元素::after来创建一个三角形,并使用position: absolute在导航下方。对于每个导航链接,我们设置了一个相对定位的位置,并添加了一个伪元素::after来创建下划线效果,然后通过:hover和.active类来实现鼠标悬停时和当前导航链接下划线的变化效果。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。