在前端開發(fā)中，導(dǎo)航是一個(gè)非常重要的部分。為了讓網(wǎng)站更具互動性和吸引力，我們可以通過添加一些動畫效果，讓導(dǎo)航更加出彩。本文就將為大家介紹一些HTML5導(dǎo)航動畫效果的代碼大全。

1. 導(dǎo)航菜單下劃線動畫效果：

ul li {
position: relative;
display: inline-block;
padding-bottom: 10px;
}
ul li a {
text-decoration: none;
}
ul li:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 50%;
background: #000;
transition: width 0.5s ease;
transform: translateX(-50%);
}
ul li:hover:after,
ul li:focus:after {
width: 80%;
}

2. 導(dǎo)航欄文字顏色變化動畫效果：

ul li a {
color: #000;
transition: color 0.5s ease;
}
ul li:hover a,
ul li:focus a{
color: #fff;
}

3. 導(dǎo)航按鈕動畫效果：

.nav-btn {
position: relative;
width: 30px;
height: 20px;
cursor: pointer;
}
.nav-btn span {
position: absolute;
width: 100%;
height: 2px;
background: #000;
transition: transform 0.5s ease;
}
.nav-btn span:nth-child(1) {
top: 0;
left: 0;
}
.nav-btn span:nth-child(2) {
top: 9px;
left: 0;
}
.nav-btn span:nth-child(3) {
bottom: 0;
left: 0;
}
.nav-btn.active span:nth-child(1) {
transform: rotate(45deg);
top: 9px;
left: 5px;
}
.nav-btn.active span:nth-child(2) {
opacity: 0;
}
.nav-btn.active span:nth-child(3) {
transform: rotate(-45deg);
bottom: 9px;
left: 5px;
}

4. 導(dǎo)航欄漸變色動畫效果：

ul li {
position: relative;
display: inline-block;
padding: 10px;
text-align: center;
}
ul li:before {
content: '';
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(to bottom, #000, #fff);
opacity: 0;
transition: opacity 0.5s ease;
transform: skew(-15deg);
}
ul li:hover:before,
ul li:focus:before {
opacity: 1;
}

以上就是 HTML5 導(dǎo)航動畫效果代碼大全，可以根據(jù)項(xiàng)目需求自由選擇使用。希望本文能對您有所幫助。