在現(xiàn)代web設(shè)計(jì)中，導(dǎo)航欄是網(wǎng)站最重要的組件之一。為了使網(wǎng)站更加具有吸引力和易用性，設(shè)計(jì)師通常會(huì)為導(dǎo)航欄添加一些動(dòng)畫效果。下面是一個(gè)HTML導(dǎo)航欄動(dòng)畫效果的代碼演示：
<html>
<head>
<style>
/* 導(dǎo)航欄樣式 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1em;
color: #fff;
}
/* 導(dǎo)航鏈接樣式 */
.navbar a {
color: #fff;
text-decoration: none;
transition: color 0.2s ease-in-out;
}
/* 鼠標(biāo)懸停樣式 */
.navbar a:hover {
color: #f00;
}
/* 下劃線特效 */
.navbar a::after {
content: '';
display: block;
width: 0%;
height: 2px;
background-color: #f00;
transition: width 0.2s ease-in-out;
}
/* 鏈接懸停下劃線效果 */
.navbar a:hover::after {
width: 100%;
}
</style>
</head>
<body>
<nav class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</nav>
</body>
</html>在這個(gè)示例中，導(dǎo)航欄使用flex布局，使其水平排列。每個(gè)導(dǎo)航鏈接都被設(shè)為紅色，當(dāng)鼠標(biāo)懸停時(shí)，顏色會(huì)變?yōu)榧t色。此外，每一個(gè)鏈接下面都有一個(gè)紅色下劃線，當(dāng)鼠標(biāo)懸停在鏈接上時(shí)，下劃線會(huì)展開，覆蓋整個(gè)鏈接。
總之，這個(gè)動(dòng)畫效果使得導(dǎo)航欄更加美觀和易于使用，為您的網(wǎng)站帶來更好的用戶體驗(yàn)。