css3炫酷上下导航效果

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类来实现鼠标悬停时和当前导航链接下划线的变化效果。