Cipta navigasi animasi yang menarik menggunakan CSS3

Pada zaman dahulu pembangunan web, pembangun akan bergantung pada Adobe Flash apabila mereka perlu mencipta sebarang jenis animasi untuk tapak web mereka. Lama kelamaan, orang ramai meninggalkan Flash dan mula melakukan banyak perkara ini dengan bantuan CSS dan JavaScript. Akhir sekali, dengan CSS3 dan sokongan penyemak imbas luas yang kini dinikmati, kami boleh melakukan beberapa perkara yang cukup menakjubkan menggunakan hanya beberapa CSS3 dan tiada yang lain.

Dalam tutorial ini, saya akan menunjukkan kepada anda cara mencipta menu navigasi animasi yang menarik menggunakan CSS3. Anda boleh melihatnya dalam tindakan dalam demo CodePen di bawah:

Teruja untuk melaksanakan menu? Mari mulakan.

Tanda Keputusan

HTML5 memperkenalkan banyak teg dan ciri baharu. Ini bermakna kita tidak perlu lagi menggunakan elemen div untuk membungkus semua yang kita mahu gayakan. Penanda kami kini boleh menjadi lebih waras dan semantik. 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.1rem 会在它们之间引入额外的间距.

我们还对列表元素应用了不均匀的填充。您可以看到顶部内边距设置为1.5rem，而底部内边距仅为0.5rem。我们正在补偿分配给 top 属性的偏移值。我们还希望底部是圆角的，因此我们将 10px 的 border-radius 应用于右下角和左下角。

为什么我们要偏移列表元素的顶部位置？这是因为我们将在悬停时将它们动画到较低的位置。 transition 属性帮助我们使动画平滑而不是突然。

默认情况下，列表元素内的链接将具有浅蓝色和下划线。我们通过将 color 设置为 white 并将 text-decoration Mari mulakan dengan bahagian tajuk tapak web. Kami membungkusnya dalam elemen header seperti yang ditunjukkan di bawah.

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

Elemen pengepala mengandungi div kosong yang hanya bertindak sebagai pengisi ruang. Selepas itu, kami mempunyai elemen nav yang mengandungi navigasi utama kami. Pautan navigasi pada asasnya adalah sebahagian daripada senarai tidak tersusun, yang akan kami gayakan kemudian.

Sekarang kami akan menulis beberapa markup untuk kandungan utama halaman web. Kami akan menggunakan tag section dan article di sini.

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

Teg artikel mengandungi kandungan utama halaman web, iaitu catatan blog, manakala teg bahagian mengandungi bahagian yang berbeza dalam catatan blog.

Tetapkan gaya pengepala

Seperti yang saya nyatakan sebelum ini, header halaman kami akan mengandungi elemen div pengisi ruang di bahagian atas. Oleh kerana ini akan menjadi ruang kosong dalam contoh kami, kami akan memberikannya ketinggian 150px. Di bawah ialah semua CSS yang digunakan pada elemen div. Kami mahu elemen div diletakkan sebahagiannya di atas pautan navigasi. Itulah sebabnya kami menggunakan 999's z-index. Walau bagaimanapun, sifat ini tidak berfungsi untuk elemen berkedudukan statik, jadi kita perlu menukar position kepada relative. Atribut box-shadow memberikan kita kesan 3D yang halus, dengan pengisi div sebenarnya berada di atas menu navigasi kami.

🎜Kami juga boleh menggunakan kecerunan linear berulang pada elemen body untuk menjadikan latar belakang lebih menarik. 🎜

nav ul li::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background: white;
  top: -30px;
  left: 0;
  border-radius: 0 0 10px 10px;
}

Tetapkan gaya menu navigasi🎜 🎜Pautan dalam menu navigasi perlu diletakkan bersebelahan secara mendatar, dengan jarak sekata di antaranya. Terdapat pelbagai cara untuk mencapai ini, tetapi kami akan menggunakan Flexbox kerana ia adalah yang paling mudah dan paling berkesan untuk kes tertentu ini. 🎜 🎜Berikut ialah CSS yang akan kami gunakan pada senarai tidak tertib, elemen senarai tidak tersusun dan pautan elemen senarai tidak tersusun: 🎜 rrreee 🎜Menetapkan paparan senarai tidak tertib kepada flex akan meletakkan semua elemen senarai bersebelahan dan menetapkan nilai atribut gap kepada 🎜0.1 rem 🎜 akan memperkenalkan jarak tambahan antara mereka.🎜 🎜Kami juga menggunakan padding yang tidak rata pada elemen senarai. Anda boleh melihat bahawa padding atas ditetapkan kepada 🎜1.5rem🎜, manakala padding bawah hanya 🎜0.5rem🎜. Kami memberi pampasan untuk nilai offset yang diberikan kepada atribut top. Kami juga mahu bahagian bawah dibundarkan, jadi kami menggunakan jejari sempadan sebanyak 🎜10px🎜 ke penjuru kanan bawah dan kiri bawah. 🎜 🎜Mengapa kita mengimbangi kedudukan 🎜atas🎜 elemen senarai? Ini kerana kami akan menghidupkannya ke kedudukan yang lebih rendah pada tuding. Atribut transition membantu kami menjadikan animasi lancar dan bukannya mendadak. 🎜 🎜Secara lalai, pautan dalam elemen senarai akan mempunyai warna biru muda dan garis bawah. Kami menyingkirkannya dengan menetapkan warna kepada 🎜putih🎜 dan hiasan teks kepada 🎜tiada🎜. 🎜 🎜Akhir sekali, kami akan menggunakan CSS berikut untuk menjadikan menu lebih berwarna: 🎜 rrreee 🎜Seperti yang anda lihat, kami tidak perlu menetapkan kelas berasingan untuk setiap pautan menu navigasi. Kita boleh menggayakannya secara individu hanya menggunakan pemilih 🎜anak-anak🎜. Inilah yang kami ada setakat ini: 🎜 🎜🎜🎜🎜

设置文章内容的样式

我们的导航菜单现在看起来正是我们想要的。然而，主要文章内容几乎看不见。现在我们来解决这个问题。为了提高内容的可见性和外观，我们需要做的就是应用以下 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 就能完成这样的事情。阅读这两篇文章以获得灵感并了解更多信息。

Atas ialah kandungan terperinci Cipta navigasi animasi yang menarik menggunakan CSS3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!