在過去的 Web 開發(fā)時代，開發(fā)人員在需要為其網(wǎng)站制作任何類型的動畫時都會依賴 Adob??e 的 Flash。隨著時間的推移，人們放棄了 Flash，開始借助 css 和 JavaScript 來完成許多這樣的事情。最后，借助 CSS3 及其現(xiàn)在所享有的廣泛瀏覽器支持，我們只需使用一些 CSS3 而無需其他任何東西，就可以做一些非常令人驚奇的事情。
在本教程中，我將向您展示如何使用 CSS3 創(chuàng)建一個很酷的動畫導(dǎo)航菜單。您可以在下面的 CodePen 演示中看到它的實際效果：
對實施菜單感到興奮嗎？讓我們開始吧。
立即學(xué)習(xí)“前端免費學(xué)習(xí)筆記（深入）”；
決定標(biāo)記
HTML5 引入了許多新標(biāo)簽和功能。這意味著我們不再需要使用 div 元素來包裝我們想要設(shè)置樣式的所有內(nèi)容。我們的標(biāo)記現(xiàn)在可以更加明智和語義化。
讓我們從網(wǎng)站的標(biāo)題部分開始。我們將其包裝在 header 元素內(nèi)，如下所示。
<header><div class="top-wrapper"> </div> <nav><ul> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">solutions</a></li> <li><a href="#">contact</a></li> </ul></nav></header>
標(biāo)頭元素包含一個空的 div ，它僅充當(dāng)空格填充符。之后，我們有一個 nav 元素，其中包含我們的主導(dǎo)航。導(dǎo)航鏈接基本上是無序列表的一部分，我們稍后將對其進(jìn)行樣式設(shè)置。
現(xiàn)在，我們將為網(wǎng)頁的主要內(nèi)容編寫一些標(biāo)記。我們將在這里使用 section 和 article 標(biāo)簽。
<article class="main-content"><section><h2>What is Lorem Ipsum?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus gravida felis et fringilla aliquam. Phasellus erat lorem, efficitur sed facilisis non, scelerisque a metus. Nam sit amet fermentum felis, vitae ultrices purus. Ut dui ligula, sagittis ut blandit ac, interdum ut urna.</p> <p>Cras quis magna sit amet dui ultrices elementum. Suspendisse laoreet sem nisi, pretium vestibulum sapien commodo cursus. Sed et gravida tellus. Suspendisse nec dapibus mi, quis dignissim massa. Sed sit amet velit scelerisque, tristique ipsum in, tristique orci.</p> <p>Aliquam dictum pretium orci, at molestie augue euismod non. Nam ac lobortis mauris, eu ultrices leo. Etiam facilisis arcu non libero molestie, eget vestibulum urna rhoncus. </p> </section></article>
article 標(biāo)簽包含網(wǎng)頁的主要內(nèi)容，即博客文章，而 section 標(biāo)簽包含博客文章的不同部分。
設(shè)置標(biāo)題樣式
正如我之前提到的，我們網(wǎng)頁的 header 將在頂部包含一個空格填充符 div 元素。由于在我們的示例中這將是空白區(qū)域，因此我們將為其指定 150px 的高度。以下是應(yīng)用于 div 元素的所有 CSS。
div.top-wrapper { height: 150px; background: linear-gradient(black, #616161); padding: 20px; position: relative; z-index: 999; box-shadow: 0 2px 5px black; }
我們希望 div 元素部分放置在導(dǎo)航鏈接上。這就是為什么我們應(yīng)用了 999 的 z-index 。但是，此屬性不適用于靜態(tài)定位的元素，因此我們需要將 position 更改為 relative。 box-shadow 屬性為我們提供了微妙的 3D 效果，填充符 div 實際上位于我們的導(dǎo)航菜單上方。
我們還可以對 body 元素應(yīng)用重復(fù)的線性漸變，以使背景更有趣。
body { background: repeating-linear-gradient( 45deg, #424242 0px, #424242 5px, #6e6e6e 5px, #6e6e6e 7px ); }
設(shè)置導(dǎo)航菜單的樣式
導(dǎo)航菜單中的鏈接需要水平并排放置，并且它們之間的間距均勻。有多種方法可以實現(xiàn)這一點，但我們將使用 Flexbox，因為對于這種特殊情況，它是最簡單且最有效的方法。
以下是我們將應(yīng)用于無序列表、無序列表元素和無序列表元素鏈接的 CSS：
nav ul { margin-left: 20px; list-style: none; display: flex; gap: 0.1rem; } nav ul li { background: black; padding: 1.5rem 1rem 0.5rem 1rem; position: relative; border-radius: 0 0 10px 10px; top: -1.25rem; transition: 0.2s all; text-transform: uppercase; } nav ul li a { color: white; text-decoration: none; }
將無序列表的 display 設(shè)置為 flex 會將所有列表元素并排放置，并將 gap 屬性的值設(shè)置為 0.1rem 會在它們之間引入額外的間距.
我們還對列表元素應(yīng)用了不均勻的填充。您可以看到頂部內(nèi)邊距設(shè)置為1.5rem，而底部內(nèi)邊距僅為0.5rem。我們正在補償分配給 top 屬性的偏移值。我們還希望底部是圓角的，因此我們將 10px 的 border-radius 應(yīng)用于右下角和左下角。
為什么我們要偏移列表元素的頂部位置？這是因為我們將在懸停時將它們動畫到較低的位置。 transition 屬性幫助我們使動畫平滑而不是突然。
默認(rèn)情況下，列表元素內(nèi)的鏈接將具有淺藍(lán)色和下劃線。我們通過將 color 設(shè)置為 white 并將 text-decoration 設(shè)置為 none 來擺脫它們。
最后，我們將使用以下 CSS 使菜單更加豐富多彩：
nav ul li:nth-child(1) { background: #ff9800; } nav ul li:nth-child(2) { background: #c2185b; } nav ul li:nth-child(3) { background: #1e88e5; } nav ul li:nth-child(4) { background: #7cb342; } nav ul li:nth-child(5) { background: #546e7a; }
如您所見，我們不必為每個導(dǎo)航菜單鏈接分配單獨的類。我們只需使用 nth-child 選擇器即可單獨設(shè)置它們的樣式。這是我們目前所擁有的：
設(shè)置文章內(nèi)容的樣式
我們的導(dǎo)航菜單現(xiàn)在看起來正是我們想要的。然而，主要文章內(nèi)容幾乎看不見。現(xiàn)在我們來解決這個問題。為了提高內(nèi)容的可見性和外觀，我們需要做的就是應(yīng)用以下 CSS：
article.main-content, nav { width: 90%; margin: 0px auto; } section { background: white; padding: 2rem; border-radius: 0.5rem; position: relative; z-index: 999; top: -0.5rem; } p { line-height: 1.5; margin: 1rem 0; }
將相同的 width 和 margin 應(yīng)用于我們的文章，導(dǎo)航將它們正確對齊。還記得我們之前為無序列表分配了 20px 的 margin-left 嗎？這將使我們的導(dǎo)航菜單稍微位于文章左邊緣的右側(cè)。
此處的 z-index 屬性也適用于在懸停動畫時將內(nèi)容保留在菜單鏈接上方。
動畫導(dǎo)航菜單
我們想要為導(dǎo)航菜單鏈接設(shè)置三個屬性的動畫。第一個是我們將菜單項垂直移動到較低位置的位置。
我們還更新了填充屬性，使頂部填充減少到 0.5rem，而底部填充增加到 1.5rem。頂部和底部填充值基本上顛倒了，因為導(dǎo)航菜單鏈接現(xiàn)在將在底部而不是頂部被切斷。
我們設(shè)置動畫的第三個屬性是 border-radius，左上角和右上角變?yōu)?10px。左下角和右下角變?yōu)?0。
以下是每當(dāng)用戶將鼠標(biāo)懸停在菜單項上時應(yīng)用這些更改的 CSS：
nav ul li:hover { top: 20px; padding: 0.5rem 1rem 1.5rem 1rem; border-radius: 10px 10px 0 0; }
所有這些動畫都在0.2s內(nèi)發(fā)生，因為這是我們之前分配給 transition 屬性的持續(xù)時間。
為偽元素設(shè)置動畫
現(xiàn)在我們唯一要做的就是導(dǎo)航鏈接頂部的白框的創(chuàng)建和動畫。我們借助偽元素來實現(xiàn)這一點。我們使用 ::after 偽類來創(chuàng)建偽元素。這個偽元素成為我們原始選擇器的最后一個子元素。
這是我們用來創(chuàng)建偽元素的 CSS：
nav ul li::after { content: ""; position: absolute; width: 100%; height: 20px; background: white; top: -30px; left: 0; border-radius: 0 0 10px 10px; }
為 content 屬性提供一個值很重要，即使該值是空字符串。我們將 position 設(shè)置為 absolute 以將該元素從正常文檔流中取出并按照我們想要的方式定位。 100% 的寬度可確保所有偽元素與其各自導(dǎo)航鏈接的 width 相匹配。
最終結(jié)果如下所示：
最終想法
在本教程中，我們僅使用一些 CSS3 屬性創(chuàng)建了一個很酷的動畫導(dǎo)航菜單，而無需編寫任何 JavaScript 代碼。您可以通過多種有趣的方式使用 CSS3 為網(wǎng)頁上的內(nèi)容添加動畫效果。雖然一些非常復(fù)雜的場景可能需要使用 JavaScript 來實現(xiàn)動畫，但您會驚訝地發(fā)現(xiàn)僅使用一些 CSS 就能完成這樣的事情。閱讀這兩篇文章以獲得靈感并了解更多信息。
