Comment implémenter la commutation de tabulation animée

Cette fois, je vais vous montrer comment implémenter le changement de tabulation animé, et quelles sont les précautions pour mettre en œuvre le changement de tabulation animé. Voici un cas pratique, jetons un coup d'oeil.

Le concepteur a donné un rendu du changement d'onglet. Bien qu’il s’agisse d’une petite fonction, les ingénieurs front-end doivent encore prêter attention à de nombreux détails lors de sa mise en œuvre. J'ai écrit une démo pour votre référence.

L'effet final est le suivant :

Pour que l'animation gif montre les détails, j'ai prolongé la durée de l'animation à 3 secondes

Idée de mise en œuvre

Lignes verticales à intervalles, car elles ne sont pas verticales, donc les bordures ne peuvent pas être utilisées. Je vais utiliser des pseudo-éléments.

n'a que 3 barres verticales, mais 4 li s. C'est simple et peut être sélectionné à l'aide du sélecteur :not(:first-child).

La couleur d'arrière-plan change parce que je veux avoir un effet de petit à grand. Par conséquent, je ne peux pas utiliser directement la couleur d'arrière-plan pour y parvenir. Je prévois également d'utiliser des pseudo-éléments pour y parvenir.

Si la taille du pseudo-élément est utilisée pour le contrôler, le calcul sera plus compliqué, je souhaite donc utiliser box-shadow pour y parvenir.

D'accord, c'est tout. Commençons à écrire le code, comme suit :

Code HTML

  <p class="m">
    <ul class="tab">
      <li><a href="">导航1</a></li>
      <li><a href="">导航2</a></li>
      <li><a href="">导航3</a></li>
      <li><a href="">导航4</a></li>
    </ul>
  </p>

La structure de code ci-dessus est ce que nous Je l'ai déjà fait Une fois que c'est écrit, je pense que c'est OK, donc je ne ferai aucun ajustement. Il n'y a pas de code encombrant.

Code CSS

.m { margin: 100px; }
.tab { width: 400px; margin: 0 auto; border: 1px solid #ddd; height: 40px; text-align: center; line-height: 40px; background: #fff; border-radius: 10px; overflow: hidden; }
.tab li { float: left; width: 100px; position: relative; overflow: hidden; }
.tab li:before, .tab li:after, .tab li a { -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; }
.tab li:before, .tab li:after { content: ""; display: block; }
.tab li:not(:first-child):after { background: #ddd; height: 20px; width: 1px; left: 0; top: 10px; position: absolute; }
.tab li a { display: block; position: relative; z-index: 2; color: #000; font-size: 14px; }
.tab li:before { width: 0; height: 0; top: 50%; left: 50%; z-index: 1; position: absolute; }
.tab li:hover a { color: #fff; }
.tab li:hover:before { box-shadow: 0 0 0 100px #36bc99; }
.tab li:hover + li:after, .tab li:hover:after { height: 0; top: 20px; }

Analyse du code :

La mise en œuvre de l'animation est très simple, utilisez simplement l'attribut de transition.

Pour contrôler votre propre pseudo-élément et le pseudo-élément de l'élément frère suivant, utilisez simplement le sélecteur +.

Les autres codes sont relativement clairs et simples, vous pouvez les analyser vous-même.

Il est très simple d'obtenir cet effet. L'accent est mis sur l'accumulation quotidienne et la combinaison flexible de divers paramètres. Penser à la méthode d’implémentation et enfin écrire le code est très rapide. Et il n’y a pas de point culminant de connaissance là-dedans.

La raison pour laquelle CSS est difficile n'est pas que vous ne savez pas comment le faire, mais que vous ne savez pas comment l'adapter.

En fait, nous n'avons encore restauré que 99 % de l'effet de conception. L'une des deux lignes est à l'intérieur de l'arrière-plan et l'autre est à l'extérieur de l'arrière-plan. Que dois-je faire si je veux mettre les deux divisions. lignes à l’intérieur de l’arrière-plan ? Qu’en est-il de la mise en œuvre ? Vous pouvez y réfléchir.

Profitez du scss. Le CSS ci-dessus est compilé. En fait, il est très pratique et rapide de l'implémenter avec scss, et le code est plus lisible.

La démonstration est la suivante :

.m {
  margin: 100px;
}
.tab {
  width: 400px;margin: 0 auto;border: 1px solid $cdd;height: 40px;text-align: center;line-height: 40px;
  background: $cff;border-radius: 10px;overflow: hidden;
  li {
    float: left;width: 100px;position: relative;overflow: hidden;
    &:before,&:after,a {@include dz();}
    &:before,&:after {
      content: "";display: block;
    }
    &:not(:first-child) {
      &:after {
        background: $cdd;height: 20px;width: 1px;left: 0;top: 10px;position: absolute;
      }
    }
    a {
      display: block;position: relative;z-index: 2;color: $c00;font-size: 14px;
    }
    &:before {
      width: 0;height: 0;top: 50%;left: 50%;z-index: 1;position: absolute;
    }
    &:hover {
      a {color: $cff;}
      &:before {
        box-shadow: 0 0 0 100px $cyan;
      }
      & + li:after,&:after {
        height: 0;top: 20px;
      }
    }
  }
}

Bien sûr, j'ai utilisé des variables de couleur et du code mixin dans ce code. Vous ne pouvez pas l'utiliser directement.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée de l'utilisation des événements de pointeur en CSS3

Explication détaillée de l'utilisation de concentration intérieure

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!