css导航栏特效
时间: 2023-07-25 15:06:54 浏览: 51
以下是一些常见的 CSS 导航栏特效:
1. 下划线动画效果:
```css
.nav-item {
position: relative;
}
.nav-item::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: #000;
transition: width 0.3s ease-in-out;
}
.nav-item:hover::after {
width: 100%;
}
```
2. 滑动条效果:
```css
.nav-item {
position: relative;
}
.nav-item::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #000;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease-in-out;
}
.nav-item:hover::before {
transform: scaleX(1);
}
```
3. 渐变色效果:
```css
.nav-item {
background-image: linear-gradient(to bottom, #000, #333);
color: #fff;
transition: background-image 0.3s ease-in-out;
}
.nav-item:hover {
background-image: linear-gradient(to bottom, #333, #000);
}
```
以上是一些常用的 CSS 导航栏特效,你可以在这些基础上进行修改和定制,实现更多炫酷的效果。