Erstellen Sie mit CSS3 eine coole animierte Navigation

In den alten Tagen der Webentwicklung verließen sich Entwickler auf Flash von Adobe, wenn sie Animationen jeglicher Art für ihre Website erstellen mussten. Im Laufe der Zeit gaben die Leute Flash auf und begannen, viele dieser Dinge mithilfe von CSS und JavaScript zu erledigen. Schließlich können wir mit CSS3 und der breiten Browserunterstützung, die es jetzt genießt, einige ziemlich erstaunliche Dinge tun, indem wir nur etwas CSS3 und nichts anderes verwenden.

In diesem Tutorial zeige ich Ihnen, wie Sie mit CSS3 ein cooles animiertes Navigationsmenü erstellen. Sie können es in der CodePen-Demo unten in Aktion sehen:

Begeistert von der Implementierung von Menüs? Fangen wir an.

Entscheidungszeichen

HTML5 führt viele neue Tags und Funktionen ein. Das bedeutet, dass wir nicht mehr das div-Element verwenden müssen, um alles zu umhüllen, was wir stylen möchten. Unser Markup kann jetzt sinnvoller und semantischer sein.

Beginnen wir mit dem Titelbereich der Website. Wir wickeln es in ein header-Element ein, wie unten gezeigt.

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

Das

header-Element enthält ein leeres div ，它仅充当空格填充符。之后，我们有一个 nav, das nur als Leerzeichen dient. Danach haben wir ein nav-Element, das unsere Hauptnavigation enthält. Navigationslinks sind grundsätzlich Teil einer ungeordneten Liste, die wir später gestalten werden.

Jetzt schreiben wir einige Markups für den Hauptinhalt der Webseite. Wir werden hier das Tag section 和 article verwenden.

<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 Tags enthalten verschiedene Teile eines Blogbeitrags.

Titelstil festlegen

Wie ich bereits erwähnt habe, wird das header 将在顶部包含一个空格填充符 div 元素。由于在我们的示例中这将是空白区域，因此我们将为其指定 150px 的高度。以下是应用于 div unserer Webseite oben ein Leerzeichenelement

enthalten. Da es sich in unserem Beispiel um ein Leerzeichen handelt, geben wir ihm eine Höhe von 150 Pixel. Nachfolgend finden Sie das gesamte CSS, das auf das

-Element angewendet wird. div 元素部分放置在导航链接上。这就是为什么我们应用了 999 的 z-index 。但是，此属性不适用于静态定位的元素，因此我们需要将 position 更改为 relative。 box-shadow 属性为我们提供了微妙的 3D 效果，填充符 div

div.top-wrapper {
  height: 150px;
  background: linear-gradient(black, #616161);
  padding: 20px;
  position: relative;
  z-index: 999;
  box-shadow: 0 2px 5px black;
}

Wir möchten, dass das

-Element teilweise über dem Navigationslink platziert wird. Aus diesem Grund haben wir den z-index von 999 angewendet. Diese Eigenschaft funktioniert jedoch nicht für statisch positionierte Elemente, daher müssen wir position in relative ändern. Das Attribut box-shadow verleiht uns einen subtilen 3D-Effekt, wobei sich der Füller body tatsächlich über unserem Navigationsmenü befindet.

Wir können auch einen sich wiederholenden linearen Farbverlauf auf das

-Element anwenden, um den Hintergrund interessanter zu gestalten.

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

Legen Sie den Stil des Navigationsmenüs fest

Links im Navigationsmenü müssen horizontal nebeneinander platziert werden, mit gleichmäßigem Abstand zwischen ihnen. Es gibt mehrere Möglichkeiten, dies zu erreichen, aber wir werden Flexbox verwenden, weil es für diesen speziellen Fall am einfachsten und effizientesten ist.

display 设置为 flex 会将所有列表元素并排放置，并将 gapHier ist das CSS, das wir auf ungeordnete Listen, ungeordnete Listenelemente und ungeordnete Listenelement-Links anwenden:

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

Wenn Sie den Wert des Attributs

einer ungeordneten Liste auf

0,1rem festlegen, wird ein zusätzlicher Abstand zwischen ihnen eingeführt. Wir wenden auch eine ungleichmäßige Polsterung auf die Listenelemente an. Sie können sehen, dass die obere Polsterung auf 1,5remtop 属性的偏移值。我们还希望底部是圆角的，因此我们将 10px 的 border-radius eingestellt ist, während die untere Polsterung nur

0,5rem

beträgt. Wir kompensieren den Offset-Wert, der dem Attribut top zugewiesen ist. Wir möchten auch, dass die Unterseite abgerundet ist, also wenden wir einen border-radius von 10px auf die untere rechte und untere linke Ecke an. transition

Warum versetzen wir die

oberstecolor 设置为 white 并将 text-decoration Position von Listenelementen? Dies liegt daran, dass wir sie beim Schweben in eine niedrigere Position animieren. Eigenschaften helfen uns, Animationen flüssig statt abrupt zu gestalten.

Standardmäßig sind Links innerhalb von Listenelementen hellblau und unterstrichen. Wir werden sie los, indem wir color auf

white

und text-decoration auf

none setzen.

Abschließend verwenden wir das folgende CSS, um das Menü bunter zu gestalten:

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

n-ten-Kind-Selektor verwenden. Das haben wir bisher:

🎜🎜🎜🎜

设置文章内容的样式

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

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS3 eine coole animierte Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!