Créez une navigation animée sympa en utilisant CSS3

Dans l'ancien temps du développement Web, les développeurs s'appuyaient sur Flash d'Adobe chaque fois qu'ils avaient besoin de créer tout type d'animation pour leur site Web. Au fil du temps, les gens ont abandonné Flash et ont commencé à faire bon nombre de ces choses avec l'aide de CSS et de JavaScript. Enfin, avec CSS3 et la large prise en charge des navigateurs dont il bénéficie désormais, nous pouvons faire des choses assez étonnantes en utilisant juste du CSS3 et rien d'autre.

Dans ce tutoriel, je vais vous montrer comment créer un menu de navigation animé sympa en utilisant CSS3. Vous pouvez le voir en action dans la démo CodePen ci-dessous :

Enthousiasmé par la mise en œuvre de menus ? Commençons.

Marque de décision

HTML5 introduit de nombreuses nouvelles balises et fonctionnalités. Cela signifie que nous n'avons plus besoin d'utiliser l'élément div pour envelopper tout ce que nous voulons styliser. Notre balisage peut désormais être plus sensé et sémantique.

Commençons par la section titre du site Web. Nous l'enveloppons dans un élément header comme indiqué ci-dessous.

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

L'élément

header contient un div ，它仅充当空格填充符。之后，我们有一个 nav vide qui agit uniquement comme un remplisseur d'espace. Après cela, nous avons un élément nav qui contient notre navigation principale. Les liens de navigation font essentiellement partie d’une liste non ordonnée, que nous styliserons plus tard.

Nous allons maintenant écrire du balisage pour le contenu principal de la page Web. Nous utiliserons ici la balise 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 Les balises contiennent différentes parties d'un article de blog.

Définir le style du titre

Comme je l'ai déjà mentionné, notre page Web header 将在顶部包含一个空格填充符 div 元素。由于在我们的示例中这将是空白区域，因此我们将为其指定 150px 的高度。以下是应用于 div contiendra un élément de remplissage d'espace

en haut. Puisqu'il s'agira d'un espace vide dans notre exemple, nous lui donnerons une hauteur de 150px. Vous trouverez ci-dessous tous les CSS appliqués à l'élément

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

Nous souhaitons que l'élément

soit placé partiellement sur le lien de navigation. C'est pourquoi nous avons appliqué le z-index de 999. Cependant, cette propriété ne fonctionne pas pour les éléments positionnés statiquement, nous devons donc changer position en relative. L'attribut box-shadow nous donne un subtil effet 3D, avec le remplissage body situé au-dessus de notre menu de navigation.

Nous pouvons également appliquer un dégradé linéaire répétitif à l'élément

pour rendre l'arrière-plan plus intéressant.

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

Définissez le style du menu de navigation

Les liens dans le menu de navigation doivent être placés côte à côte horizontalement, avec un espacement régulier entre eux. Il existe plusieurs façons d'y parvenir, mais nous allons utiliser Flexbox car c'est la plus simple et la plus efficace pour ce cas particulier.

display 设置为 flex 会将所有列表元素并排放置，并将 gapVoici le CSS que nous appliquerons aux listes non ordonnées, aux éléments de liste non ordonnés et aux liens d'éléments de liste non ordonnés :

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

Définir la valeur de l'attribut

d'une liste non ordonnée sur

0.1rem introduira un espacement supplémentaire entre eux. Nous appliquons également un remplissage inégal aux éléments de la liste. Vous pouvez voir que le rembourrage supérieur est réglé sur 1,5remtop 属性的偏移值。我们还希望底部是圆角的，因此我们将 10px 的 border-radius, tandis que le rembourrage inférieur n'est que de

0,5rem

. Nous compensons la valeur de décalage attribuée à l'attribut top. Nous voulons également que le bas soit arrondi, nous appliquons donc un border-radius de 10px aux coins inférieur droit et inférieur gauche. transition

Pourquoi décalons-nous la position

topcolor 设置为 white 并将 text-decoration des éléments de la liste ? En effet, nous les animerons vers une position plus basse en survol. La propriété nous aide à rendre l'animation fluide plutôt qu'abrupte.

Par défaut, les liens dans les éléments de la liste auront une couleur bleu clair et seront soulignés. Nous nous en débarrassons en définissant color sur

white

et text-decoration sur

none.

Enfin, nous utiliserons le CSS suivant pour rendre le menu plus coloré :

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

ntième-enfant

. Voici ce que nous avons jusqu'à présent : 🎜 🎜🎜🎜🎜

设置文章内容的样式

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!