使用CSS3創建一個酷炫的動畫導航

在過去的 Web 開發時代，開發人員在需要為其網站製作任何類型的動畫時都會依賴 Adob​​e 的 Flash。隨著時間的推移，人們放棄了 Flash，開始借助 CSS 和 JavaScript 來完成許多這樣的事情。最後，借助 CSS3 及其現在所享有的廣泛瀏覽器支持，我們只需使用一些 CSS3 而無需其他任何東西，就可以做一些非常令人驚奇的事情。

在本教學中，我將向您展示如何使用 CSS3 建立一個很酷的動畫導覽選單。您可以在下面的 CodePen 演示中看到它的實際效果：

對實作選單感到興奮嗎？讓我們開始吧。

決定標記

HTML5 引進了許多新標籤和功能。這意味著我們不再需要使用 div 元素來包裝我們想要設定樣式的所有內容。我們的標記現在可以更加明智和語義化。

讓我們從網站的標題部分開始。我們將其包裝在 header 元素內，如下所示。

<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>

標頭元素包含一個空的 div ，它只充當空格填充符。之後，我們有一個 nav 元素，包含我們的主導航。導航連結基本上是無序列表的一部分，我們稍後將對其進行樣式設定。

現在，我們將為網頁的主要內容寫一些標記。我們將在這裡使用 section 和 article 標籤。

<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 標籤包含網頁的主要內容，即部落格文章，而 section 標籤包含部落格文章的不同部分。

設定標題樣式

正如我之前提到的，我們網頁的 header 將在頂部包含一個空格填充符 div 元素。由於在我們的範例中這將是空白區域，因此我們將為其指定 150px 的高度。以下是套用於 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 元素部分放置在導航連結上。這就是為什麼我們應用了 999 的 z-index 。但是，此屬性不適用於靜態定位的元素，因此我們需要將 position 變更為 relative。 box-shadow 屬性為我們提供了微妙的 3D 效果，填充符 div 實際上位於我們的導覽功能表上方。

我們也可以對 body 元素套用重複的線性漸變，以使背景更有趣。

body {
  background: repeating-linear-gradient(
    45deg,
    #424242 0px,
    #424242 5px,
    #6e6e6e 5px,
    #6e6e6e 7px
  );
}

設定導覽選單的樣式

導航選單中的連結需要水平並排放置，並且它們之間的間距均勻。有多種方法可以實現這一點，但我們將使用 Flexbox，因為對於這種特殊情況，它是最簡單且最有效的方法。

以下是我們將應用於無序列表、無序列表元素和無序列表元素連結的 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 設定為flex 會將所有清單元素並排放置，並將gap 屬性的值設為0.1 rem 會在它們之間引入額外的間距.

我們也對列表元素應用了不均勻的填充。您可以看到頂部內邊距設定為1.5rem，而底部內邊距僅為0.5rem。我們正在補償指派給 top 屬性的偏移值。我們也希望底部是圓角的，因此我們將 10px 的 border-radius 套用到右下角和左下角。

為什麼我們要偏移列表元素的頂部位置？這是因為我們將在懸停時將它們動畫到較低的位置。 transition 屬性幫助我們使動畫平滑而不是突然。

預設情況下，清單元素內的連結將具有淺藍色和底線。我們透過將 color 設為 white 並將 text-decoration 設為 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;
}

如您所見，我們不必為每個導航選單連結分配單獨的類別。我們只需使用 nth-child 選擇器即可單獨設定它們的樣式。這是我們目前所擁有的：

设置文章内容的样式

我们的导航菜单现在看起来正是我们想要的。然而，主要文章内容几乎看不见。现在我们来解决这个问题。为了提高内容的可见性和外观，我们需要做的就是应用以下 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 应用于我们的文章，导航将它们正确对齐。还记得我们之前为无序列表分配了 20px 的 margin-left 吗？这将使我们的导航菜单稍微位于文章左边缘的右侧。

此处的 z-index 属性也适用于在悬停动画时将内容保留在菜单链接上方。

动画导航菜单

我们想要为导航菜单链接设置三个属性的动画。第一个是我们将菜单项垂直移动到较低位置的位置。

我们还更新了填充属性，使顶部填充减少到 0.5rem，而底部填充增加到 1.5rem。顶部和底部填充值基本上颠倒了，因为导航菜单链接现在将在底部而不是顶部被切断。

我们设置动画的第三个属性是 border-radius，左上角和右上角变为 10px。左下角和右下角变为 0。

以下是每当用户将鼠标悬停在菜单项上时应用这些更改的 CSS：

nav ul li:hover {
  top: 20px;
  padding: 0.5rem 1rem 1.5rem 1rem;
  border-radius: 10px 10px 0 0;
}

所有这些动画都在0.2s内发生，因为这是我们之前分配给 transition 属性的持续时间。

为伪元素设置动画

现在我们唯一要做的就是导航链接顶部的白框的创建和动画。我们借助伪元素来实现这一点。我们使用 ::after 伪类来创建伪元素。这个伪元素成为我们原始选择器的最后一个子元素。

这是我们用来创建伪元素的 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 设置为 absolute 以将该元素从正常文档流中取出并按照我们想要的方式定位。 100% 的宽度可确保所有伪元素与其各自导航链接的 width 相匹配。

最终结果如下所示：

最终想法

在本教程中，我们仅使用一些 CSS3 属性创建了一个很酷的动画导航菜单，而无需编写任何 JavaScript 代码。您可以通过多种有趣的方式使用 CSS3 为网页上的内容添加动画效果。虽然一些非常复杂的场景可能需要使用 JavaScript 来实现动画，但您会惊讶地发现仅使用一些 CSS 就能完成这样的事情。阅读这两篇文章以获得灵感并了解更多信息。

以上是使用CSS3創建一個酷炫的動畫導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！