CSS炫酷動畫導(dǎo)航指的是具有美觀動感的網(wǎng)站導(dǎo)航條，這種導(dǎo)航條不僅可以增強用戶體驗，還可以提升網(wǎng)站整體的視覺效果。下面我們一起來看一下如何實現(xiàn)CSS炫酷動畫導(dǎo)航吧。
<nav class="cool-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">GALLERY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav>
首先我們需要一個
.cool-nav ul {
padding: 0;
margin: 0;
display: flex;
justify-content: space-between;
list-style: none;
}
.cool-nav li {
flex-basis: 15%;
text-align: center;
transition: all 0.5s ease;
}
.cool-nav li:hover {
transform: translateY(-10px);
}
.cool-nav li:nth-child(1) { /* HOME */
background-color: #ff7171;
}
.cool-nav li:nth-child(2) { /* ABOUT */
background-color: #ffb06e;
}
.cool-nav li:nth-child(3) { /* SERVICES */
background-color: #f9de59;
}
.cool-nav li:nth-child(4) { /* GALLERY */
background-color: #8bd3c5;
}
.cool-nav li:nth-child(5) { /* CONTACT */
background-color: #5285ec;
}
.cool-nav a {
color: white;
text-decoration: none;
display: block;
padding: 20px 0;
font-weight: bold;
}以上代碼通過設(shè)置
- 和
- 的display屬性為flex，實現(xiàn)了橫向布局和間距平均分配。同時，通過設(shè)置.transition屬性和:hover偽類來實現(xiàn)當(dāng)鼠標(biāo)懸停在菜單選項上時增加動畫效果。而不同選項的背景顏色則通過:nth-child選擇器來實現(xiàn)。最后定義了標(biāo)簽的樣式，包括字體加粗、顏色和padding。
通過使用上述代碼，我們就可以創(chuàng)建出一個炫酷的動態(tài)導(dǎo)航菜單了。當(dāng)鼠標(biāo)懸停在菜單選項上時，選項的背景色會變化并向上移動，增加了視覺效果。這樣的導(dǎo)航條可以在各類高端網(wǎng)站中見到，為網(wǎng)站提供了極為專業(yè)的展示效果。
下一篇mysql建表的工具